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

我也设置了这个 fiddle 以防你想弄乱它，看看你是否可以让它工作。谢谢！

Answer 1

如果您希望它们彼此相邻，请尝试将您的 li 设为 inline-block，或者如果您希望它们位于彼此下方，请尝试将它们设为块。确保给 li 元素一个固定的宽度，并将它们的文本对齐方式设置为 centered.

Answer 2

你可以像这样将#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 3

在您的 li 上设置 display: table;

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

li 中文本的垂直对齐方式

Vertical alignment of text in li

html

css

html-lists