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

时间:2012-05-18 00:47:54

标签: html html-lists vertical-alignment css

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

http://jsfiddle.net/qvuCm/

注意:标记无法更改。

希望仅使用CSS,不使用JavaScript。

2 个答案:

答案 0 :(得分:2)

进行了以下更改:

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/

答案 1 :(得分:0)

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

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