垂直排列圖像

Question

我有一個文檔結構，其中一個無序列表包含其中包含圖像的div。 divs都有150px的設置高度，但是其中一些圖像恰好小於此值。有沒有辦法在CSS中垂直定位圖片內的圖像。

的jsfiddle：http://jsfiddle.net/xQ7pJ/

我的HTML：

<ul> 
    <li> 
     <div> 
      <img src=""/> 
     </div> 
    </li> 
</ul> 

感謝。

Answer 1

是，

<img src="" style="vertical-align:middle;"/> 

垂直對齊屬性，也可以設置爲「文本頂」

更多信息here

Answer 2

要做到這一點是應用圖像的最簡單方法作爲div本身的背景圖像，並將背景位置設置爲50％+無重複。

<ul> 
    <li> 
     <div style="background: url(http://bestvaluesupply.devsiteonline.com/ProdImages/SEY%2098-50-1.jpg) 50% 50% no-repeat"></div> 
    </li> 
</ul> 

http://jsfiddle.net/sbeliv01/xQ7pJ/2/

雖然在這種情況下，如果圖像大於150像素容器較大那麼它將在這些約束切斷。

除此之外方法，如果你並不需要擔心IE7或更少，你只打算在div內顯示單個圖像，那麼你可以設置div到display: table-cell，然後設置vertical-align: middle; text-align: center;。

ul li div { display: table-cell; vertical-align: middle; text-align: center; }

http://jsfiddle.net/sbeliv01/xQ7pJ/3/