li中文字的垂直对齐

Question

我最近一直在用HTML / CSS鬼混，并且试图在li垂直对齐文本，以便使其居中。 我已经看过这个问题（或它的某种变体）很多次了，所以我提前为这个问题道歉，我确信您已经厌倦了，但是我无法获得任何建议的解决方案上班。 我还试图避免为li设置特定的height / line-height ，因为我希望这可以调整为屏幕尺寸。

这是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;
}

我还设置了这个小提琴 ，以防您想弄乱它，看看是否可以使其正常工作。 谢谢！

Answer 1

您可以像这样将#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或其列表项的高度进行什么更改都没有关系。 请参阅jsFiddle的第一个工作修订版 ；）

Answer 2

设置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;
}

小提琴的第六版

Answer 3

在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/

Answer 4

如果要让li彼此相邻，请尝试使其成为inline-block块；如果希望它们在彼此之下，请尝试将其成块。 确保为li元素提供固定的宽度，并将它们的text-align设置为centered 。