溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS如何解決DIV居中相關問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
用CSS解決DIV居中問題
一，用CSS使DIV層水平居中
對需要水平居中的DIV層添加以下屬性:
margin-left:auto;
margin-right:auto;
這樣在FF中已經居中了,可是在IE中看還是沒有居中!
問題并不在CSS而在XHTML網頁本身.需要加上這樣的代碼才能使得上述設置有效果:
<!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;這個的意思就是在父級元素內的內容居中；對于IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”
需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，只要在每個拆出的div里定義MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。
如何使圖片在DIV中垂直居中
用背景的方法。舉例：
body{BACKGROUND:url(背景圖片路徑)#FFFno-repeatcenter;}關鍵就是***的center,這個參數定義圖片的位置。還可以寫成“topleft”(左上角)或者"bottomright"等，也可以直接寫數值"5030"。
如何使文本在DIV中垂直居中
如果是文字，便不能用背景方法，可以用增高行距的辦法變通實現垂直居中，完整代碼如下：
<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;表示行內垂直居中，我們將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。
CSS+DIV控制頁面中元素垂直居中代碼全局和區域垂直居中
<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居中相關問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
