Question

I have an inline list of elements, the elements within the list can sometimes be image or text. The image is always the same height as the list, but how can I vertical align text within the list?

http://jsfiddle.net/qvuCm/

Note: The mark-up can’t be changed.

Looking to do this with CSS only, no JavaScript.

Answer 1

Made the following changes:

ul li a img{
    display:block;
}


a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
    display:table-cell;
    vertical-align: middle;
    width:100px;
    height:80px;
}

http://jsfiddle.net/qvuCm/12/