如何讓div內(nèi)容居中（文字或圖片）

2012/7/19 12:42:49作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

DIV+CSS是現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中越來(lái)越流行的一種網(wǎng)頁(yè)標(biāo)準(zhǔn)，前臺(tái)的設(shè)計(jì)越來(lái)越拋棄了TABLE的設(shè)計(jì)應(yīng)用，現(xiàn)在前臺(tái)美工如果不懂DIV+CSS可以說(shuō)真的有點(diǎn)落伍了，今天我們要講的是如何讓div內(nèi)容居中（文字或圖片），下面分幾個(gè)部分來(lái)講。

一、讓div文字居中

如果要讓DIV中的文字居中，就得用到文字對(duì)齊方式代碼text-align:center，這個(gè)居中默認(rèn)為水平居中，詳細(xì)代碼寫(xiě)法如下：

div { 
border:1px solid red;
text-align:center;
}

如果要DIV中的文字垂直居中，你就必須要用到文本高度這個(gè)屬性（line-height），這樣文字才能垂直居中，代碼如下：

div { 
border:1px solid red; 
line-height:55px;
}

二、讓div圖片居中

如果我們要讓DIV中的圖片居中，用普通的方法無(wú)法實(shí)現(xiàn)，用"vertical-align:middle;"和用img的align="absmiddle"都失效，通過(guò)測(cè)試，這里得用到vertical-align:middle和font-size:**px這兩個(gè)屬性設(shè)置，代碼舉例如下：

.s{ height:100px; font-size:87.5px; border:1px #FF0000 solid; } 
.s img{ vertical-align:middle;  } 
<div class="s">
<img src="http://yzddtk.cn/logo.jpg" /> </div>

這里特別說(shuō)明：font-size:87.5px;這個(gè)是關(guān)鍵，必須設(shè)置height高度的87.5%，例如：height:50，那么font-size:44，如果這個(gè)設(shè)置好圖片居中設(shè)置會(huì)無(wú)效的哦。

標(biāo)簽： DIV 居中