實(shí)現(xiàn)DIV居中布局三種途徑
DIV+CSS布局有很多值得學(xué)習(xí)的地方，這里和大家描述一下關(guān)于DIV居中布局的實(shí)現(xiàn)方法，主要有三種方法，每種方法都有各自的特點(diǎn)，請(qǐng)看下文詳細(xì)介紹，相信通過本文描述你對(duì)DIV居中布局一定會(huì)有深刻的認(rèn)識(shí)。
關(guān)于DIV居中布局的幾種實(shí)現(xiàn)方法
現(xiàn)在DIV+CSS布局越來越流行了，怎么實(shí)現(xiàn)div居中好像是個(gè)難題。本文給出關(guān)于DIV居中布局的幾種實(shí)現(xiàn)方法,相信會(huì)對(duì)大家有所幫助.
第一種方法:
- body{
- margin:0pxauto;
- text-align:center;
- }
但是如果沒申明下面這句解析方法,頁面就會(huì)出錯(cuò).不能居中對(duì)齊!
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"
- "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
但是有時(shí)候頁面并不能全部按上面規(guī)定的代碼格式來編寫,比如說要改多彩滾動(dòng)條.
第二種方法:
- margin-left:50%;
- left:-width/2;
這里的width不是CSS中的Width,而是你的DIV的寬度例如你的div是768px寬，那么你就應(yīng)該設(shè)置left:-384px。
第三種方法:使用JS來控制div居中.
在頁面之中添加了下面的一小段代碼.
- <scriptlanguagescriptlanguage="javascript"
- type="text/javascript"src="function.js"></script>
function.js內(nèi)容:
- if(window.screen.width>800)
- {document.write("<styletypestyletype=\"text/css\">
- body{margin-left:"+(window.screen.width-800)/2+"px}</style>");}
經(jīng)過測(cè)試.可以正常實(shí)現(xiàn)DIV居中
補(bǔ)充一點(diǎn):上面這段JS必須放在你的最后一個(gè)CSS連接或</style>的后面.
◆下面是這種方法的詳細(xì)講解:
首先解釋一下JS中窗口和網(wǎng)頁的幾種尺寸屬性的含義
document.body.clientWidth（網(wǎng)頁可見區(qū)域?qū)挘菏侵笧g覽器顯示網(wǎng)頁的區(qū)域?qū)挾?，不包括瀏覽器的邊框?qū)挾群痛怪睗L動(dòng)條的寬度。大小隨著瀏覽器的窗口大小而改變。
document.body.clientHeight（網(wǎng)頁可見區(qū)域高）：是指瀏覽器顯示網(wǎng)頁的區(qū)域所能看到的高度，不包括瀏覽器的邊框?qū)挾群退綕L動(dòng)條的高度。大小隨著瀏覽器的窗口大小而改變。
document.body.scrollTop（網(wǎng)頁被卷去的高）：是指拉動(dòng)垂直滾動(dòng)條時(shí)網(wǎng)頁上面被地址欄及菜單欄遮蓋著的部分的高。
document.body.scrollLeft（網(wǎng)頁被卷去的左）：是指拉動(dòng)水平滾動(dòng)條時(shí)網(wǎng)頁左面被左邊線遮蓋著的部分的寬。#p#
現(xiàn)在我們來分析一下程序該如何實(shí)現(xiàn)：
第一步我們要實(shí)現(xiàn)的是使層在彈出時(shí)絕對(duì)DIV居中不去考慮是否有滾動(dòng)條的情況。
1.計(jì)算出層距離顯示區(qū)域左邊和上邊的位置
注意：divId指的是所要居中的層,divId.clientWidth為其寬度?。?br />
- 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標(biāo)簽的id值，這樣這個(gè)層就是DIV居中顯示的了。
第二步我們要實(shí)現(xiàn)的是使在拖動(dòng)滾動(dòng)條的情況下彈出的層也能居中。
1.其實(shí)很簡(jiǎn)單我們只要把拖動(dòng)的寬度和高度加到前面計(jì)算出來的左邊距和上邊距中就OK了。
- v_left+=document.body.scrollLeft;
- v_top+=document.body.scrollTop;
2.把得到的值重新賦給DIV的left和top屬性
- divId.style.left＝v_left;
- divId.style.top=v_top;
這樣顯示出來就是DIV居中的了。
完整代碼如下：
- <!doctypehtmlpublic“-//w3c//dtdhtml4.0transitional//en">
- <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()">test</span></td></tr>
- <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr>
- <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr>
- <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr>
- <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr>
- <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr>
- </table>
- <dividdivid=mxhstyle="position:absolute;
- left:200px;top:30px;width:200px;height:200px;
- background-color:navy;border:2px">我是居中顯示的了。</div>
- </body>
- </html>
總結(jié)一下:
主要是這句代碼起的作用:(window.screen.width-800)/2//計(jì)算頁面應(yīng)該留出的邊距數(shù)值.800為我的DIV寬度+滾動(dòng)條寬度.實(shí)際應(yīng)用改為你自己的大小.
【編輯推薦】
- DIV居中布局的三大實(shí)現(xiàn)方法
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式
- 14大CSS工具提高網(wǎng)頁設(shè)計(jì)效率
- 五大CSS3新技術(shù)用法指導(dǎo)
- 解讀DIV CSS網(wǎng)頁布局中CSS無效十個(gè)原因
