Hello Friends
I am trying to centre anchor tags vertically within list tags. Here is what I currently have:
And here’s the HTML and CSS for the above:
<nav>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</nav>
nav ul li {
display: inline-block;
height: 370px;
width: 198px;
background-color: red;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 40px;
width: 198px;
height: 50px;
vertical-align: middle;
display: block;
}
As you can see the links are not vertically centered within the <li> element. Even though I had used the { vertical-align } property.
I would greatly appreciate any help.
Thank You.