Вертикальное выравнивание текста в li

Question

Я недавно обманывал HTML/CSS, и я пытаюсь вертикально выровнять текст в li так, чтобы он находился в центре. Я видел, что этот вопрос (или некоторые его варианты) спросил несколько раз, поэтому я заранее извиняюсь за задание вопроса. Я уверен, что вы устали видеть, но я не могу получить ни одно из предлагаемых решений работать. Я также стараюсь не устанавливать значение height/line-height для li, так как я хотел бы, чтобы это отрегулировало размер экрана.

Вот HTML:

<ul id="nav"> 
    <li><a href="">Home</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Experience</a></li> 
    <li><a href="">Contact</a></li> 
</ul> 

Вот CSS:

#nav { 
    position: absolute; 
    width: 100%; 
    height: 100vh; 
    top: 0; 
    left: 0; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#nav li { 
    text-align: center; 
    height: 25%; 
    width: 100%; 
    margin: 0 auto; 
} 

#nav li a { 
    display: block; 
    height: 100%; 
} 

#nav li a:hover { 
    background: #ccc; 
} 

У меня тоже есть этот fiddle набор в случае, если вы хотите возиться с ним и посмотреть, если вы можете получить он работает. Благодаря!

Answer 1

Установите display: table; на вашем li и

display: table-cell; 
vertical-align: middle; 

на ваших a

конечных стилей:

#nav li { 
    display: table; 
    text-align: center; 
    height: 25%; 
    width: 100%; 
    margin: 0 auto; 
} 

#nav li a { 
    display: table-cell; 
    height: 100%; 
    vertical-align: middle; 
} 

Rev 6 of your fiddle

Answer 2

Попробуйте сделать ваш liinline-block, если вы хотите, чтобы они были рядом с eachother, или как блок, если вы хотите, чтобы они под друг друга. Удостоверьтесь, что вы даете li элементам фиксированную ширину и устанавливаете их выравнивание текста как centered.

Answer 3

Вы можете просто сделать линейку высоту #nav Li 25% от высоты окна просмотра, как так

#nav li { 
text-align: center; 
height: 25%; 
width: 100%; 
margin: 0 auto; 
line-height: 25vh; /* this is the only thing you need to add */ 
} 

Это очень простое и короткое, и будет работать с любыми изменениями в текст (например, размер шрифта и т. д.) или список. Неважно, сколько элементов вы добавляете или удаляете из списка или какие изменения вы делаете на высоту #nav или элементов списка. См first working revision of your jsFiddle;)

Answer 4

Попробуйте эти изменения в вашем CSS

#nav li { 
    text-align: center; 
    height: 25%; 
    width: 100%; 
    margin: 0 auto; 
    display: table; /* added */ 
} 

#nav li a { 
    display: table-cell; /* changes from block to table-cell */ 
    vertical-align: middle; /* added */ 
    height: 100%; 
} 

См Рабочих здесь пример http://jsfiddle.net/t6ryfqzk/7/