DIV 置中的絕好解決方案_經驗交流

來源:互聯網
上載者:User
現在進行WEB重構的時候,一般我們做DIV 置中是這樣:
複製代碼 代碼如下:
body{
margin:0px auto;
text-align:center;
}

但是在沒申明下面這句解析方法的時候,頁面就會出錯.不能置中對齊!
複製代碼 代碼如下:


為此困擾了我幾天.那麼有的朋友就會說:你加上這句不就行了嗎? 可是有時候頁面並不能全部按上面規定的代碼格式來編寫,比如說要改多彩捲軸.
直到昨天,一個想法在我腦中閃了一下. 何不用JS來控制頁面的邊距?說幹就幹!
找了個頁面.添加了下面的一小段代碼.
複製代碼 代碼如下:


function.js內容:
複製代碼 代碼如下:
if(window.screen.width>800){document.write("");}

儲存,測試. 哈哈,換了幾個解析度都可以正常置中!至此實驗成功.
總結一下:
主要是這句代碼起的作用:
複製代碼 代碼如下:
(window.screen.width-800)/2 //計算頁面應該留出的邊距數值.800為我的DIV寬度 + 捲軸寬度.實際應用改為你自己的大小.

補充一點:上面這段JS 必須放在你的最後一個CSS串連或的後面.
歡迎大家到我的小站交流更好的實現方法!
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.