Vertical align text on inline list items

问题:

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.

回答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/

回答2:

If you set the a style to display: table-cell, you can use vertical-align (http://jsfiddle.net/whm8X/) e.g. :

a {
    display: block;
    height: 80px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;
}