垂直中心一個div

Question

爲什麼不這項工作（即DIV內容不居中 - 垂直）?:

<div style="display: table;"> 
    <div style="vertical-align: middle; display:table-cell; height: 100px; font-size: 11px;"> 
     <a target="_self" runat="server" href="~/daily.aspx"> 
     <img src="images.png" /></a> 
      content in div<br /> 
    </div> 
</div> 

谷歌搜索無處不在了解我怎麼能垂直對齊一個div和它的內容已經失敗。

任何人都可以爲div中的內容提供最好的CSS樣式。

更新 需要說明的是，我需要垂直對齊圖像的文本不僅僅是div。文字是圖像的底部。可能不得不使用花車。

Answer 1

如果你只需要在文本中間對齊文本，這將做到：

<div> 
    <div> 
     <a target="_self" runat="server" href="~/daily.aspx"> 
     <img src="images.png" style="vertical-align: middle;"/></a> 
     content in div<br /> 
    </div> 
</div> 

這裏是一個例子http://jsfiddle.net/Tetaxa/tVQc6/

Answer 2

如果您將元素顯示爲表格，爲什麼不使用表格？

據我所知，除非你知道它的高度，否則不可能將內容居中。如果你知道你的高度可以使用這樣的事情：

.container { 
    position: relative; 
} 

.vertical { 
    position: absolute: 
    top: 50%; 
    height: 200px; 
    margin-top: -100px; // This is half the height 
}