CSS div中的圖像的垂直對齊

Question

我有這個div，裏面的div是一個圖像，我試圖做的是垂直對齊圖像居中在中間，沒有任何我嘗試似乎工作...

<div style=" height: 200px; vertical-align: middle; width: 225px;"> 
<img width="225" src="upload/home5.jpg"> 
</div> 

我也試過這增加了vertical-align:middle;的圖像爲好，但沒有奏效。

任何人有任何想法？

我忘了提，我使用一些jQuery代碼，它使我的div position:absolute;

這是我的div看起來像是經過Jquery的後

<div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 225px; height: 200px;">

，這裏是圖像的css

img {  
    background-color: #eee; 
    margin: auto; 
    display:block; 
} 

Answer 1

您可以在div上使用display：table-cell。這允許垂直對齊屬性起作用。不支持IE7。如果您需要，還有其他解決方案。

http://jsfiddle.net/5HzpM/

div { border: 1px solid gray; display: table-cell; } 
img { vertical-align:middle; }