Question

如何在列表中垂直居中显示文字？我可以尝试很多方法，但是，似乎没有任何工作。

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

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

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

1 个答案: