I am facing difficulty centering the li element of a ul navigation vertically. The elements inside the li have varying heights, and I am struggling to find a solution.
Here is the link for reference
Below is the HTML code snippet:
<ul id="navigation">
<li><a href="#">Test</a></li>
<li>
<a href="#">
<div id="logo">
THE BIG DIV
</div>
</a>
</li>
<li><a href="#">Test</a></li>
</ul>
The CSS styles used are as follows:
#navigation li {
display: inline;
font-size: 17px;
margin-left: 15px;
float: left;
background-color: red;
}
#logo {
width: 300px;
height: 300px;
background-color: blue;
}
Any help or suggestions would be greatly appreciated. Thanks!