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

你可以将#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 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;
}

Rev 6 of your fiddle

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。

li中文本的垂直对齐

4 个答案: