如何垂直對齊文本？

Question

如何垂直對齊浮動div中的文本？例如：我有一個固定高度的動態內容。如果內容很小或很大，它必須自動垂直對齊。

謝謝

Answer 1

表格單元格是最簡單的解決方案。

Javascript是一種替代方法（測量div的大小和文本大小，然後調整填充或lineheight或其他）。

編輯：或者這真棒CSS：

CSS

div#container { 
    border: solid 1px; 
    height: 300px; 
} 

div#content { 
    border: solid 1px; 
} 

div#balance { 
    border: solid 1px; 
    /* gotta be 100% */ 
    height: 100%; 
} 

div.valign { 
    /* firefox 2 */ 
    display: -moz-inline-box; 
    /* everybody else */ 
    display: inline-block; 

    vertical-align: middle; 
} 

/* IE 6 and 7 hack */ 
html* div.valign { 
    display: inline; 
} 

HTML

<div id="container"> 
    <div id="balance" class="valign"></div> 
    <div id="content" class="valign"> 
     Blah blah blah blah<br/> 
     Blah blah blah blah<br/> 
     Blah blah blah blah<br/> 
     Blah blah blah blah<br/> 
     Blah blah blah blah 
    </div> 
</div> 

一直想作一篇博客文章這一段時間，我覺得是時候。

Answer 2

我知道這會毀了我的聲望，但是...使用表格單元格。任何跨瀏覽器CSS垂直對齊的解決方案都會難以維持，並且樂觀。

Answer 3

您是否嘗試過vertical-align：middle; ？

Answer 4

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div> 

Answer 5

克里斯Coyier對眼前這個寫了一個優秀教程：http://css-tricks.com/vertically-center-multi-lined-text/

我已經用它自己，它完美的作品。

Answer 6

我以前遇到過這個問題。 我會引用專家的意見，所以我不會欺騙它： 「......內部物體絕對位於區域高度的一半，然後向上移動一半高度。」

如果從數據庫生成數據並且每個頁面的高度不同，這可以全部用％代替精確像素來完成。

來源：here

演示：鏈接的頁面上方

這裏去我的第一個答案上...