Вертикальный центр текста якоря с высотой жидкости

Question

Вертикальный центр текста якоря с высотой жидкости

0

Я пытаюсь достичь этой реализации:

Контейнер - height: 100% а li height: 50%. Ссылка составляет 50% высоты, и вся цветная область должна быть кликабельна. Это мой код:

html, body {
    height: 100%;
}

.menu {
    height: 100%;

    ul {
        height: 100%;

        li {
            height: 50%;

            a {
                display: block;
                height: 100%;
                line-height: 100%;
            }
        }
    }
}

К сожалению, трюк line-height не работает. Высота окна, очевидно, жидкая, потому что она должна реагировать на каждое устройство. Идеи?

Fred Collins 14 апр. 2014, в 08:00

Источник

Теги:

html

css

html5

responsive-design

fluid-layout

3 ответа

Ещё вопросы

Jekrb · Answer 1 · 2014-04-14T04-28-00.000Z

Что, если вы просто это сделаете? http://jsfiddle.net/SBag9/2/

.menu {

height: 100%;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 50%;
}

Мне нужна хорошая поддержка браузера, а флекс не очень поддерживается.

Andrei Volgin · Answer 2 · 2014-04-14T04-07-00.000Z

Попробуйте установить line-height: 50% для элемента <li>.

Mohamed Elgharabawy · Answer 3 · 2014-04-14T03-37-00.000Z

Возможно, вам понадобится использовать что-то вроде положения и абсолютного для достижения этого.

html, body {
    height: 100%;
    margin:0px;
    padding:0px;
}

.menu {height: 100%;}
.menu ul {
        height: 100%;
        list-style:none;
        margin:0px;
        padding:0px;
}
 .menu ul li {
            height: 50%;
            width:100%;
            display:table;
}

.menu ul li a {
    display:table-cell;
    vertical-align:middle;
    text-decoration:none;
    font-weight:bold;
    text-align:center;
    color:#000;
}

Вот рабочая скрипка:

http://jsfiddle.net/qsHw2/2/

Вся область li должна быть кликабельной. Следовательно, элементы a должны быть больше, чем весь li . Не работает таким образом.
Я отредактировал пост и обновил скрипку. теперь весь li кликабелен!