Search code examples
csscss-floatcentering

Vertical centering anchors inside floated list items

I've got a simple menu like this:

<ul class="menu">
    <li>
        <a href="">Home</a>
    </li>
    <li>
        <a href="">Products</a>
    </li>
    <li>
        <a href="">Contact</a>
    </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?

Solution

  • 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/