Vertical centering anchors inside floated list items - css

Question

I've got a simple menu like this:
<ul class="menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
The list elements of the unordered list are floated to the left and have a fixed height:
ul.menu li {
float: left;
height: 50px;
list-style: none;
padding: 0 10px;
background-color: yellow;
}
jsFiddle
Now I would like to vertically center the anchors inside the list elements.
What is the best approach for that?

Answer 1

To vertically center text, set a line-height to the same value as the height of the element. Seeing as you have a set height, this will work with no problems:
.menu li a {
line-height: 50px;
}
http://jsfiddle.net/QNMy7/3/

Answer 2

add line-height equal the height:
.menu li {
float: left;
height: 50px;
**line-height: 50px;**
padding: 0 10px;
list-style: none;
background-color: yellow;
}

Answer 3

.menu li {
float: left;
height: 50px;
padding: 0 10px;
list-style: none;
background-color: yellow;
text-align: center;
min-width: 100px;
}
.menu li a
{
line-height: 50px;
}

Answer 4

The issue is with .menu li class. You have declared a float for it to move to the left, but to make it vertically-aligned, you have to remove the float and apply a display:table-cell; to get the vertical-alignment working.
For Instance,
.menu li {
/*float: left;*/
display:table-cell;
vertical-align:middle;
height: 50px;
padding: 0 10px;
list-style: none;
background-color: yellow;
}
Here is the WORKING SOLUTION
Hope this helps.

Answer 5

You can use line-height to control vertical alignment, but this only works reliably across each list item if they're all restricted to one line.
The most reliable way to achieve this is by removing the float & displaying the list item as a CSS table-cell:
.menu {
display: table;
}
.menu li {
height: 50px;
padding: 0 10px;
list-style: none;
background-color: yellow;
display: table-cell;
vertical-align: middle;
}
.menu li a {
display: block;
}
This way, if one of the links drops onto two lines, it's still vertically centered, as shown here:
http://jsfiddle.net/QNMy7/6/

Answer 6

In addition to float and table-cell, you can also use inline-block:
.menu li {
display: inline-block;
line-height: 50px;
padding: 0 10px;
list-style: none;
background-color: yellow;
}
.menu li a {
vertical-align: middle;
}
Similar to the other posts, I set line-height: 50px on .menu li and vertical-align: middle on the a elements. You can omit the height in this example.
See demo: http://jsfiddle.net/audetwebdesign/QNMy7/7/