垂直對齊需要什麼工作？

我有一個非常簡單的測試HTML網站是這樣的：垂直對齊需要什麼工作？

<html> 
<body> 
<div style="height:500px"> 
    <img style="height:200px; vertical-align:middle;" src="http://i.imgur.com/BidLR.jpg" /> 
</div> 
</body> 
</html>

但圖像沒有在div顯示的垂直居中。（至少在Google Chrome中）。它需要什麼圖像呈現中心？

來源

2012-09-26 Nicholas

由於圖像是_inline_元件，'上垂直align'指定相對於所述_surrounding text_其位置。 CSS在塊元素的垂直居中方面非常糟糕。 – lanzz

也許嘗試使用垂直對齊：50％或垂直對齊：-50％，這取決於圖像是否靠近div的頂部或底部開始？對不起，如果這是錯誤的... – ecbrodie

vertical-align將圖像垂直居中在它的線上。您需要設置比圖像更高的line-height。

一睹風采區域：
http://jsfiddle.net/5ugDx/

來源

2012-09-26 19:34:49 MicronXD

謝謝。而已。我也忘記了<！DOCTYPE html>，奇怪的是它導致chrome不能居中。這是正常的嗎？ – Nicholas

沒有文檔類型，大多數瀏覽器恢復到所謂的「quirksmode」。忽略你的文檔類型聲明永遠不是好事：P – MicronXD

至少有6點不同的方式來居中圖像。選擇一個：

http://www.vanseodesign.com/css/vertical-centering/

來源

2012-09-26 20:16:27

垂直對齊需要什麼工作？

回答

相關問題