div 文字垂直置中 水平置中 div css 文字垂直置中 水平置中

http://www.jeecn.com

實現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代碼：
#div-a{
height:60px;
line-height:60px;
}

XHTML代碼：
<div id="div-a">

div 文字 垂直置中

</div>

 

    如果還想讓div裡的文字水平置中，加上“text-align:center;”即可；代碼如下：

CSS代碼：

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

XHTML代碼：
<div id="div-a">

css div 文字
垂直置中



 div css 文字
水平置中

</div>

     說明：如果在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內的內容置中；對於IE這樣設定就已經可以了。但在mozilla中不能置中。解決辦法就是在子項目定義時候設定時再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。

    但是，如果是多行文字，上面的垂直置中的方法就不行了，得用變通的方法實現；這裡建議使用table方法，在table外面再套上相應的div，代碼如下：

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

置中的方法
</td></tr>
</table>

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

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

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

    優點：
1. 同時支援塊級和內聯極元素
2. 支援非常值內容
3. 支援所有瀏覽器
    缺點：
容器不能固定高度（參考）

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

body{
BACKGROUND:url(http://www.jeecn.com

) #FFF no-repeat center;
}
     關鍵就是最後的center,這個參數定義圖片的位置。還可以寫成“top  left”(左上方)或者"bottom right"等，也可以直接寫數值"50 30"。