インラインブロックリスト項目の内容を垂直に整列する

Question

並べ替えられていないリストを水平方向に表示しようとしています。各リスト項目には、リスト項目に垂直に並べて表示したい画像のアンカータグがあります。ここに私の

HTMLです：は

<ul> 
    <li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
</ul> 

CSS：

ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    height: 93px; 
} 

ul li 
{ 
    display: inline-block; 
    width: 110px; 
    height: 93px; 
    text-align: center; 
    vertical-align: middle; 
} 

は、私がここで間違って何をしているのですか？

Answer 1

http://jsfiddle.net/zgxHB/1/

代わりdisplay: inline-block;

Answer 2

左に浮いてみてください。これは、水平線でそれらを表示し、

Answer 3

ディスプレイのdisplay: table-cell;使用してみてくださいそのブロックの状態を保持する：インラインブロック;要素がインラインレベルであるかのように扱います。つまり、ページがレンダリングされるときにマークアップ内の空白が表示されます。

TRY：

<ul><li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
</li></ul> 

OR：

<ul><!-- 
    --><li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
    --><li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
    --><li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
--></ul>