如何垂直對齊div/span中的圖像？

Question

我創建了一個JSFiddle：http://jsfiddle.net/Q8uWv/

我試圖垂直對齊圖像在div的中間。使用vertical-align: middle不起作用。此外，我試過margin-top:auto; margin-bottom:auto，但仍然沒有運氣。我怎樣才能讓這個圖像垂直居中？

Answer 1

要使用vertical-align:middle;你需要添加display:table-cell;到容器<div>：

http://jsfiddle.net/XXE2j/

Answer 2

添加行高：200px;到你的例子中的div。

Answer 3

我認爲這是關於垂直居中的最好的文章 http://blog.themeforest.net/tutorials/vertical-centering-with-css/