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.
One simple way to vertically align your text is to set line-height:100px
on your list items.
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)
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.