當前位置：軟件學堂 > 資訊首頁 > 網(wǎng)絡編程 > DIV+CSS > 如何讓div內(nèi)容居中（文字或圖片）

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

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

移動端

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

一、讓div文字居中

如果要讓DIV中的文字居中，就得用到文字對齊方式代碼text-align:center，這個居中默認為水平居中，詳細代碼寫法如下：

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

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

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

二、讓div圖片居中

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

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

這里特別說明：font-size:87.5px;這個是關鍵，必須設置height高度的87.5%，例如：height:50，那么font-size:44，如果這個設置好圖片居中設置會無效的哦。

標簽： DIV  居中