可靠地正确对齐图像？

Question

我有一个列表显示在网站上的图像列表：

<ul>
   <li><img src="1.jpg" /></li>
   <li><img src="2.jpg" /></li>
   <li><img src="3.jpg" /></li>
   <li><img src="4.jpg" /></li>
   <li><img src="5.jpg" /></li>
   <li><img src="6.jpg" /></li>
   <li><img src="7.jpg" /></li>
   <li><img src="8.jpg" /></li>
</ul>

它可能有多种高度，但宽度始终相同。换句话说，您总能找到路线：

X X X X
X X X X

或

X X X
X X X 
X X

但是目前它们在'底部'对齐，以便每个图像的底部部分与下面的图像部分对齐。我想要的是所有图像都出现在中心。即不是这个：

而是这个：

如何可靠地对齐这些，以便始终可以进行这种对齐？

Answer 1

在你的CSS中：

li{
    ...
    vertical-align: middle;
}

Answer 2

将display:inline-block与vertical-align:middle一起使用：

li{
    display:inline-block;
    vertical-align:middle;
}

JSFiddle