在內嵌塊列表項中垂直對齊內容

我試圖水平顯示無序列表。在每個列表項中，我都有一個帶圖像的錨定標記，我希望在列表項中垂直對齊。這裏是我的在內嵌塊列表項中垂直對齊內容

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; 
}

什麼我錯在這裏做什麼？

來源

2011-09-15 Steven

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

嘗試使用的display: table-cell;代替display: inline-block;

來源

2011-09-16 00:05:01 Joe

嗨。我很好奇你的方法與下面這個@Kyle Sevenoaks建議的方法（'float：left'）。任何建議哪一個更好？兩者似乎達到相同的視覺效果，但我只是想知道。 TIA。 –

@SalvatoreIovene，表格單元允許垂直對齊以及水平。 http://jsfiddle.net/zgxHB/20/，浮動解決方案的視圖。 – Joe

謝謝@JoeTuskan。所以如果你不關心垂直對齊，兩種方式是可以互換的？ –

試着漂浮李的左邊。這將在一個水平行中顯示它們，並保留其塊狀態

來源

2011-09-15 23:59:27 Kyle

顯示：內聯塊;將元素視爲內聯級別，這意味着在頁面呈現時，標記中會顯示任何空格。

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>

來源

2013-09-10 17:52:31 Kyle

在內嵌塊列表項中垂直對齊內容

回答

相關問題