垂直居中的li具有不同的高度

Question

我正在尝试创建图像行，每行有3个图像。所有这些数据都是动态的，但下面是HTML和CSS的一些示例：

ul { margin: 0; padding: 0; list-style: none; width: 900px; }

li { margin: 0; padding: 0; width: 280px; display: inline-block;
     text-align: center; }

<ul>
    <li><img src="http://i.imgur.com/FcRwL.png" /></li>
    <li><img src="http://i.imgur.com/VLwWb.png" /></li>
    <li><img src="http://i.imgur.com/euevl.png" /></li>
    <li><img src="http://i.imgur.com/VLwWb.png" /></li>
    <li><img src="http://i.imgur.com/euevl.png" /></li>
    <li><img src="http://i.imgur.com/FcRwL.png" /></li>
</ul>

这里是jsFiddle：http://jsfiddle.net/ZxPG3/

所以我的问题是所有图像看起来都是在底部垂直对齐。发生这种情况是因为li的高度等于其中包含的图像 - 它不等于ul的高度。我无法将li的高度设置为特定值，因为我永远不知道图像的高度是多少。

有没有办法将li设置为等于ul的高度，然后将图像垂直居中？

Answer 1

只需将vertical-align:middle;提供给UL 和 LI

http://jsfiddle.net/HerrSerker/WKkzK/3/

适用于FF，Chrome，Opera，Safari和IE7-9

请注意，IE7需要CSS hack才能工作

未在IE6中测试

Answer 2

试试这个：http://jsfiddle.net/ZxPG3/4/

但你需要知道最高图像的高度。 （放入line-height s的LI

Answer 3

在CSS中垂直居中很难。这是它的设计问题。

这是关于垂直居中的不同方法的interesting article。

以下是使用display:table-cell;和vertical-align:middle;的{​​{3}}但是存在问题。它不会包装，也不适用于旧版本的IE。

另外，请考虑查看demo。

Answer 4

另一种不需要设置高度的替代方法是使用display: table-row上的UL和table-cell上的LI，加上vertical-align: middle就可以了。

行动中：http://jsfiddle.net/ZxPG3/5/