溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS如何解決DIV居中相關(guān)問題

發(fā)布時間：2021-11-06 14:51:57 來源：億速云 閱讀：404 作者：小新 欄目：web開發(fā)

這篇文章主要介紹CSS如何解決DIV居中相關(guān)問題，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

用CSS解決DIV居中問題

一，用CSS使DIV層水平居中

對需要水平居中的DIV層添加以下屬性:

margin-left:auto;

margin-right:auto;

這樣在FF中已經(jīng)居中了,可是在IE中看還是沒有居中!

問題并不在CSS而在XHTML網(wǎng)頁本身.需要加上這樣的代碼才能使得上述設(shè)置有效果:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如何使DIV居中

主要的樣式定義如下：

body{TEXT-ALIGN:center;}  #center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}

說明：

首先在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內(nèi)的內(nèi)容居中；對于IE這樣設(shè)定就已經(jīng)可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設(shè)定時再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”

需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，只要在每個拆出的div里定義MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。

如何使圖片在DIV中垂直居中

用背景的方法。舉例：

body{BACKGROUND:url(背景圖片路徑)#FFFno-repeatcenter;}

關(guān)鍵就是***的center,這個參數(shù)定義圖片的位置。還可以寫成“topleft”(左上角)或者"bottomright"等，也可以直接寫數(shù)值"5030"。

如何使文本在DIV中垂直居中

如果是文字，便不能用背景方法，可以用增高行距的辦法變通實(shí)現(xiàn)垂直居中，完整代碼如下：

<html> <head> <style> body{TEXT-ALIGN:center;}  #center{MARGIN-RIGHT:auto;  MARGIN-LEFT:auto;  height:200px;  background:#F00;  width:400px;  vertical-align:middle;  line-height:200px;  }  </style> </head> <body> <dividdivid="center"><p>testcontent</p></div> </body> </html>

說明：
vertical-align:middle;表示行內(nèi)垂直居中，我們將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。

CSS+DIV控制頁面中元素垂直居中代碼全局和區(qū)域垂直居中

<styletypestyletype="text/css"media=screen> body  {  text-align:center;  }  #a  {  width:200px;  height:400px;  background:#000;  }  #b  {  margin-top:expression((a.clientHeight-50)/2);  width:50px;  height:50px;  background:#FFF;  }  #c  {  position:absolute;  left:expression((body.clientWidth-50)/2);  top:expression((body.clientHeight-50)/2);  width:50px;  height:50px;  background:#F00;  }  </style> <dividdivid="a"> <dividdivid="b"></div> </div> <dividdivid="c"></div>

另一方法:

<divstyledivstyle="background:blue;position:absolute;  left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div>

以上是“CSS如何解決DIV居中相關(guān)問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手