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

debugcn 发表于 Dev

拜尼克斯

如何在列表中垂直居中放置文本？如您所见，我已经尝试了许多方法，但是似乎没有任何效果。

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

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

j08691

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

jsFiddle示例

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

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

jsFiddle示例

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。