高さの異なる鉛直中心の梁

私は、各行に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の高さと同じに設定して、イメージを垂直に中央に配置する方法はありますか？あなたはしかし、最も高い画像の高さを知っておく必要がありhttp://jsfiddle.net/ZxPG3/4/

：

出典

2011-12-07 Steven