Vertically align content in inline-block list items

Question

I'm trying to display an unordered list horizontally. In each list item, I have an anchor tag with an image, that I'd like to display vertically aligned in the list item. Here's my

HTML:

<ul>
    <li>
        <a href="#">
            <img src="1.jpg" alt="" height="50" width="50" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="2.jpg" alt="" height="50" width="50" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="3.jpg" alt="" height="50" width="50" />
        </a>
    </li>
</ul>

CSS:

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    height: 93px;
}

ul li
{
    display: inline-block;
    width: 110px;
    height: 93px;
    text-align: center;
    vertical-align: middle;
}

What am I doing wrong here?

Answer 1

http://jsfiddle.net/zgxHB/1/

Try using display: table-cell; instead of display: inline-block;