實現DIV層內的文字垂直居中(轉)

有時候，爲了網頁設計的美觀，須要把div+css設計的頁面裏的某些div層裏的文字垂直居中，包括多行文字以及單行文字；方法有很多，但真正能實現而代碼又簡潔的介紹很少，flymorn就爲你們介紹幾種適用的div文字垂直居中的方法。

     首先要知道css裏vertical-align無效，W3C官方對vertical-align作了下面的解釋： 「 This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.」 
    
     實際上，一個Box中由不少行不少元素組成，vertical-align只做用於在同一行內的元素，它的垂直並非相對於整個Box而言的。前面定義了一個60px的高度，可是這個Box中存在不少行，那段文本並不能對齊到中央。所以但願那段文本對齊中間，須要給它定義一個line-height的屬性，讓line-height爲60px，做用於一行的vertical-align就能夠工做了。    

    若是是單行文字想垂直居中，只要保證div高和行高保持一致，就能夠了。用下面的代碼便可實現：

CSS代碼：

1 2 3 4

#div-a{ height : 60px ; line-height : 60px ; }

XHTML代碼：

1 2 3

< div  id="div-a"> ...... </ div >

　　若是還想讓div裏的文字水平居中，加上「text-align:center;」便可；代碼以下：

CSS代碼：

1 2 3 4 5

#div-a{ text-align:center; height:60px; line-height:60px; }

XHTML代碼：

1 2 3 4

< div  id="div-a"> ....   </ div >

　　說明：若是在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內的內容居中；對於IE這樣設定就已經能夠了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「MARGIN-RIGHT:auto; MARGIN-LEFT:auto;」。

　　可是，若是是多行文字，上面的垂直居中的方法就不行了，得用變通的方法實現；這裏建議使用table方法，在table外面再套上相應的div，

代碼以下：

1 2 3 4

< table > < tr >< td  style="vertical-align:middle;height:300px; </ td ></ tr > </ table >

 　　多行文字居中還有另一種方法：

多行內容居中，且容器高度可變，也很簡單，給出一致的 padding-bottom 和 padding-top 就行：

1 2 3 4 5

.middle-demo-2 { padding-top: 24px; padding-bottom: 24px; }

 

優勢：
1. 同時支持塊級和內聯極元素
2. 支持非文本內容
3. 支持全部瀏覽器

 缺點：
 容器不能固定高度

 

如何使圖片在DIV中垂直居中，能夠用背景的方法。以下：

1 2 3 4

body { BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center; }

 

關鍵就是最後的center,這個參數定義圖片的位置。還能夠寫成「top  left」(左上角)或者"bottom right"等，也能夠直接寫數值"50 30"。