垂直对齐内联列表项上的文本

【问题标题】：Vertical align text on inline list items垂直对齐内联列表项上的文本
【发布时间】：2012-05-25 14:22:24
【问题描述】：

我有一个内联元素列表，列表中的元素有时可以是图像或文本。图像始终与列表高度相同，但如何垂直对齐列表中的文本？

http://jsfiddle.net/qvuCm/

注意：标记无法更改。

希望只使用 CSS，而不是 JavaScript。

【问题讨论】：

标签： html html-lists vertical-alignment css

【解决方案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/

【讨论】：

【解决方案2】：

如果将a 样式设置为display: table-cell，则可以使用vertical-align (http://jsfiddle.net/whm8X/) 例如：

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

【讨论】：