現(xiàn)在進(jìn)行WEB重構(gòu)的時(shí)候,一般我們做DIV 居中是這樣:
復(fù)制代碼 代碼如下:
body{
margin:0px auto;
text-align:center;
}
但是在沒(méi)申明下面這句解析方法的時(shí)候,頁(yè)面就會(huì)出錯(cuò).不能居中對(duì)齊!
復(fù)制代碼 代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
為此困擾了我?guī)滋?那么有的朋友就會(huì)說(shuō):你加上這句不就行了嗎? 可是有時(shí)候頁(yè)面并不能全部按上面規(guī)定的代碼格式來(lái)編寫(xiě),比如說(shuō)要改多彩滾動(dòng)條.
直到昨天,一個(gè)想法在我腦中閃了一下. 何不用JS來(lái)控制頁(yè)面的邊距?說(shuō)干就干!
找了個(gè)頁(yè)面.添加了下面的一小段代碼.
復(fù)制代碼 代碼如下:
script language="javascript" type="text/javascript" src="function.js">/script>
function.js內(nèi)容:
復(fù)制代碼 代碼如下:
if(window.screen.width>800){document.write("style type=\"text/css\">body{margin-left:"+(window.screen.width-800)/2+"px}/style>");}
保存,測(cè)試. 哈哈,換了幾個(gè)分辨率都可以正常居中!至此試驗(yàn)成功.
總結(jié)一下:
主要是這句代碼起的作用:
復(fù)制代碼 代碼如下:
(window.screen.width-800)/2 //計(jì)算頁(yè)面應(yīng)該留出的邊距數(shù)值.800為我的DIV寬度 + 滾動(dòng)條寬度.實(shí)際應(yīng)用改為你自己的大小.
補(bǔ)充一點(diǎn):上面這段JS 必須放在你的最后一個(gè)CSS連接或/style>的后面.
歡迎大家到我的小站交流更好的實(shí)現(xiàn)方法!
您可能感興趣的文章:- jquery div 居中技巧應(yīng)用介紹
- 基于jQuery實(shí)現(xiàn)的水平和垂直居中的div窗口
- JS彈出居中的DIV的代碼
- 用js 讓圖片在 div或dl里 居中，底部對(duì)齊
- CSS如何使DIV層居中
- 通過(guò)JavaScript使Div居中并隨網(wǎng)頁(yè)大小改變而改變
