在内联列表项上垂直对齐文本 [英] 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.

只用CSS就可以做到这一点，不需要JavaScript。

Looking to do this with CSS only, no JavaScript.

推荐答案

进行了以下更改：

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/

这篇关于在内联列表项上垂直对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！