溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹DIV居中布局的三大實現方法分別是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
你對DIV居中布局的方法是否了解，這里和大家分享一下，因為現在DIV+CSS布局越來越流行了，怎么實現DIV居中好像是個難題。
關于DIV居中布局的幾種實現方法
現在DIV+CSS布局越來越流行了，怎么實現DIV居中好像是個難題。本文給出關于DIV居中布局的幾種實現方法，相信會對大家有所幫助。
***種方法:
body{ margin:0pxauto; text-align:center; }但是如果沒申明下面這句解析方法,頁面就會出錯.不能居中對齊!
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
但是有時候頁面并不能全部按上面規定的代碼格式來編寫,比如說要改多彩滾動條.
第二種方法:
margin-left:50%; left:-width/2;
這里的width不是CSS中的Width,而是你的DIV的寬度例如你的div是768px寬，那么你就應該設置left:-384px。
第三種方法:使用JS來控制DIV居中.
在頁面之中添加了下面的一小段代碼.
<scriptlanguagescriptlanguage="javascript"type="text/javascript"src="function.js">script>
function.js內容:
if(window.screen.width>800){document.write("<styletypestyletype=\"text/css\"> body{margin-left:"+(window.screen.width-800)/2+"px}style>");}經過測試.可以正常居中
補充一點:上面這段JS必須放在你的***一個CSS連接或的后面.
◆下面是DIV居中這種方法的詳細講解:
首先解釋一下JS中窗口和網頁的幾種尺寸屬性的含義
document.body.clientWidth（網頁可見區域寬）：是指瀏覽器顯示網頁的區域寬度，不包括瀏覽器的邊框寬度和垂直滾動條的寬度。大小隨著瀏覽器的窗口大小而改變。
document.body.clientHeight（網頁可見區域高）：是指瀏覽器顯示網頁的區域所能看到的高度，不包括瀏覽器的邊框寬度和水平滾動條的高度。大小隨著瀏覽器的窗口大小而改變。
document.body.scrollTop（網頁被卷去的高）：是指拉動垂直滾動條時網頁上面被地址欄及菜單欄遮蓋著的部分的高。
document.body.scrollLeft（網頁被卷去的左）：是指拉動水平滾動條時網頁左面被左邊線遮蓋著的部分的寬。
現在我們來分析一下程序該如何實現DIV居中：
◆***步我們要實現的是使層在彈出時絕對居中不去考慮是否有滾動條的情況。
1.計算出層距離顯示區域左邊和上邊的位置
注意：divId指的是所要居中的層,divId.clientWidth為其寬度！＠
vardivId=document.getElementById("xxx");
varv_left=(document.body.clientWidth-divId.clientWidth)/2;
varv_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新賦給DIV的left和top屬性
divId.style.left＝v_left;
divId.style.top=v_top;
說明：divId為DIV標簽的id值
這樣這個層就是居中顯示的了。
◆第二步我們要實現的是使在拖動滾動條的情況下彈出的層也能居中。
其實很簡單我們只要把拖動的寬度和高度加到前面計算出來的左邊距和上邊距中就OK了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
完整代碼如下：
> <html> <head> <title>彈出的層居中顯示title> <metanamemetaname="generator"content="editplus"> <metanamemetaname="author"content=""> <metanamemetaname="keywords"content=""> <metanamemetaname="description"content=""> head> <body> <tablewidthtablewidth=100%> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> table> <dividdivid=mxhstyle="position:absolute;left:200px;top:30px;width:200px;height:200px; background-color:navy;border:2px">我是居中顯示的了。div> body> html>
主要是這句代碼起的作用:(window.screen.width-800)/2//計算頁面應該留出的邊距數值.800為我的DIV寬度+滾動條寬度.實際應用改為你自己的大小.
關于DIV居中布局的三大實現方法分別是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
