圖片不能垂直居中儘管使用表和表芯

我試着使用父DIV display: table和display: table-cell在孩子的div所看到here但我似乎無法獲得圖像垂直對齊。我究竟做錯了什麼？圖片不能垂直居中儘管使用表和表芯

這裏是我的代碼：

HTML：

<div class="body_splash"> 
<img src="https://upload.wikimedia.org/wikipedia/ 
commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/> 
</div>

CSS：

.body_splash { 
    width: 378px; 
    float: left; 
    display:table; 
    height: 400px; 
    background-color: #eaeaea; 
} 
.body_splash img { 
    display: table-cell; 
    vertical-align: middle; 
}

在此先感謝。

來源

2012-07-31 methuselah

會還有什麼在箱子裏？可能有更向後兼容的解決方案，例如[這]（http://jsfiddle.net/ENGQG/1/）將工作在IE瀏覽器一路返回到版本7. – 2012-07-31 02:35:35

@ShaquinTrifonoff只是圖像 – methuselah 2012-07-31 12:23:04

嘗試DEMO

<div class="table"> 
    <div> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/> 
    </div> 
</div> 

.table { 
    display: table; 
    float: left; 
    width: 378px; 
    height: 400px; 
    background-color: #eaeaea; 
} 

.table > div { 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2012-07-31 02:23:00

快速的問題，因爲我有點神祕：爲什麼這個工作，當原來不？（以及爲什麼這會工作，當外部div簡單地設置爲'display：table'，並且內部div包含浮動，寬度等不能正常工作？） – Nightfirecat 2012-07-31 02:33:55

@Nightfirecat'vertical-align'適用於兒童它的聲明元素。你說的是「中間對齊我所有的孩子*」，而不是「中間對齊我」。 – 2012-07-31 02:39:41

@SperanskyDanil是的，謝謝。 – Nightfirecat 2012-07-31 07:55:31