Here is a simple code I am using to vertically center a hyperlink within a UL. The style is applied to the hyperlink instead of the li because I need the entire list element to be clickable.
Although my code works as intended, there seems to be a slight issue with the vertical centering as shown in this jsFiddle.
Can anyone provide insight on why this is happening? Thank you in advance.
HTML
<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>
CSS
ul
{
list-style: none;
}
ul
{
height: 100px;
line-height: 100px;
}
li, li a
{
display: inline-block;
}
li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}
li label
{
float: left;
}
li span
{
float: right;
}