html - 垂直居中李的不同高度

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 AND LI

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

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

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

没有在 IE6 下测试