DIV 居中的絕好解決方法
更新時(shí)間:2006年11月04日 00:00:00 作者:
現(xiàn)在進(jìn)行WEB重構(gòu)的時(shí)候,一般我們做DIV 居中是這樣:
body{
margin:0px auto;
text-align:center;
}
但是在沒申明下面這句解析方法的時(shí)候,頁面就會(huì)出錯(cuò).不能居中對(duì)齊!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
為此困擾了我?guī)滋?那么有的朋友就會(huì)說:你加上這句不就行了嗎? 可是有時(shí)候頁面并不能全部按上面規(guī)定的代碼格式來編寫,比如說要改多彩滾動(dòng)條.
直到昨天,一個(gè)想法在我腦中閃了一下. 何不用JS來控制頁面的邊距?說干就干!
找了個(gè)頁面.添加了下面的一小段代碼.
<script language="javascript" type="text/javascript" src="function.js"></script>
function.js內(nèi)容:
if(window.screen.width>800){document.write("<style type=\"text/css\">body{margin-left:"+(window.screen.width-800)/2+"px}</style>");}
保存,測試. 哈哈,換了幾個(gè)分辨率都可以正常居中!至此試驗(yàn)成功.
總結(jié)一下:
主要是這句代碼起的作用:
(window.screen.width-800)/2 //計(jì)算頁面應(yīng)該留出的邊距數(shù)值.800為我的DIV寬度 + 滾動(dòng)條寬度.實(shí)際應(yīng)用改為你自己的大小.
補(bǔ)充一點(diǎn):上面這段JS 必須放在你的最后一個(gè)CSS連接或</style>的后面.
歡迎大家到我的小站交流更好的實(shí)現(xiàn)方法!
復(fù)制代碼 代碼如下:
body{
margin:0px auto;
text-align:center;
}
但是在沒申明下面這句解析方法的時(shí)候,頁面就會(huì)出錯(cuò).不能居中對(duì)齊!
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
為此困擾了我?guī)滋?那么有的朋友就會(huì)說:你加上這句不就行了嗎? 可是有時(shí)候頁面并不能全部按上面規(guī)定的代碼格式來編寫,比如說要改多彩滾動(dòng)條.
直到昨天,一個(gè)想法在我腦中閃了一下. 何不用JS來控制頁面的邊距?說干就干!
找了個(gè)頁面.添加了下面的一小段代碼.
復(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>");}
保存,測試. 哈哈,換了幾個(gè)分辨率都可以正常居中!至此試驗(yàn)成功.
總結(jié)一下:
主要是這句代碼起的作用:
復(fù)制代碼 代碼如下:
(window.screen.width-800)/2 //計(jì)算頁面應(yīng)該留出的邊距數(shù)值.800為我的DIV寬度 + 滾動(dòng)條寬度.實(shí)際應(yīng)用改為你自己的大小.
補(bǔ)充一點(diǎn):上面這段JS 必須放在你的最后一個(gè)CSS連接或</style>的后面.
歡迎大家到我的小站交流更好的實(shí)現(xiàn)方法!
相關(guān)文章
網(wǎng)頁打開新窗口target=_blank不符合標(biāo)準(zhǔn)
我們要在新窗口中打開鏈接通常的做法是在鏈接后面加target="_blank",我們采用過渡型的DOCTYPE(xh tml1-transitional. dtd)時(shí)沒有問題,但是當(dāng)我們使用嚴(yán)格的DOCTYPE(xhtml1-strict.dtd)時(shí),這個(gè)方法將通不過W3C的校驗(yàn),會(huì)出現(xiàn)如下錯(cuò)誤提示:2008-05-05巧妙的最大化動(dòng)態(tài)載入IFrame的方法
巧妙的最大化動(dòng)態(tài)載入IFrame的方法...2007-03-03讓iframe自適應(yīng)高度(支持xhtml)IE firefox兼容
讓iframe自適應(yīng)高度(支持xhtml)IE firefox兼容...2007-04-04多中語言實(shí)現(xiàn)判斷客戶訪問用得是那個(gè)域名 然后轉(zhuǎn)到對(duì)應(yīng)的目錄
多中語言實(shí)現(xiàn)判斷客戶訪問用得是那個(gè)域名 然后轉(zhuǎn)到對(duì)應(yīng)的目錄...2007-05-05CSS定位中Positoin、absolute、Relative的一些研究
用Div+CSS進(jìn)行網(wǎng)站布局時(shí),做一些浮動(dòng)層等特殊特殊效果時(shí)要考慮到定位問題。這就要用到Positoin屬性等。2008-10-10《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)(二)
這篇文章主要介紹了《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)(二,需要的朋友可以參考下2016-05-05