html - 如何将文本垂直对齐到列表的中间

Question

如何使列表中的文本垂直居中？正如您所见，我尝试了很多方法，但是似乎没有任何效果。

这是 JSFiddle

这是 CSS:

ul.nav {
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    width: 100%;
    display: table; 
    table-layout: fixed;
    vertical-align: middle;
    height: 100px;
    vertical-align:middle;
}
/* this styles each link when the mouse is NOT hovered over */
li.nav {
  display: table-cell;
  vertical-align: middle;
  height:100%;
  align-items: center;
  vertical-align:middle;
}

li a {
    display:block;
    height:100%;
    width:100%;
    text-decoration:none;
    vertical-align: middle;
    align-items: center;
    vertical-align:middle;
}

li a:hover {
    background-color: #0099FF;
    color:White;
    vertical-align: middle;
    height:100%;
    align-items: center;
    vertical-align:middle;
}

和 HTML:

<ul class="nav">
<li class="nav"><a href="#home">Home</a></li>
<li class="nav"><a href="#news">News</a></li>
<li class="nav"><a href="#contact">Contact</a></li>
<li class="nav"><a href="#about">About</a></li>
</ul>

我只是想让文本完全居中，但无论我尝试什么，它似乎总是停留在顶部。

Answer 1

垂直对齐文本的一种简单方法是在列表项上设置 line-height:100px。

jsFiddle example

li.nav {
    display: table-cell;
    vertical-align: middle;
    height:100%;
    align-items: center;
    vertical-align:middle;
    line-height:100px;
}

或者，从您的链接中删除display:block 规则(此处不改变行高)

jsFiddle example

请注意，对于第二个选项，如果您希望链接占用更多空间，则必须调整链接的填充。