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

Question

How can I vertically center text in a list? I've tried many ways, as you can see, however, nothing seems to work.

Here's the JSFiddle

And here is the 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;
}

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

I just want to get the text completely centered, but no matter what I try, it always seems to stay at the top.

Answer 1

One simple way to vertically align your text is to set line-height:100px on your list items.

jsFiddle example

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

Or , remove the display:block rule from your links (no line-height change here)

jsFiddle example

Note that for the second option, you'd have to tweak the link's padding if you want the link to take up more room.