Centre Links Vertically within List

HTML & CSS
1

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.

2

Take a look here:

Understanding vertical-align, or “How (Not) To Vertically Center Content”

3

Thank you Force Flow, I had actually visited that link before through Google. But I only read the top bits … the actual solution is further down. :blush:

Thanks once again :beer: