html - インライン リスト アイテムのテキストを垂直方向に揃える

Question

要素のインライン リストがあります。リスト内の要素は、画像またはテキストの場合があります。画像は常にリストと同じ高さですが、リスト内のテキストを垂直方向に揃えるにはどうすればよいですか?

http://jsfiddle.net/qvuCm/

注: マークアップは変更できません。

これを CSS のみで行い、JavaScript は使用しません。

Answer 1

次の変更を行いました。

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/

Answer 2

aスタイルをに設定すると、 (http://jsfiddle.net/whm8X/display: table-cell )を使用できます。例:vertical-align

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