|
|
另外一種居中的方法是在使用絕對定位的前提下，用left：50%+margin-left:-375px;的組合方式來居中。兩種居中方式如下。
復制代碼 代碼如下:
/* 方法一 */
body {
background: #00FF7F;
text-align: center; /* hack for ie center alignlayout */
}
#wrapper{
background: Aqua;
width: 750px;
margin:auto; /* 或者 margin-left:auto;margin-right:auto;*/
}
/* 方法二 */
#wrapper2 {
position: absolute;
width:750px;
left:50%;
margin-left:-375px;
background: Orange;
}
我個人一直使用方法一的方式來居中，因為感覺方法二的區塊缺乏必要的剛性，代碼也不太好理解。如果你縮小方法二的窗體到一定限度，就會看到整個布局會出現流動的情況。當然有人要的就是這種效果。:)，另外方法二的一個好處是在其他嵌套區塊中不必覆蓋body元素的text-align: center;的設定，因為大部分文本還是會以左對齊居多。這樣一定程度上可以減少一點冗余。不過我覺得這個好處可以忽略不計?？傊?，大家根據各自喜好各取所需便是。
另外一個是ie的雙倍邊距的bug,解決方法就是加上display:inline;的設定即可。其實這個解析錯誤的bug會影響很多方面。如果你遇到css布局在ie中間距表現異常的時候，就可以試試看加上display:inline;的屬性申明了。而且在一定特定的布局問題問題，需要組合使用display:block;和display:inline;才能讓布局如你所愿。我在一個unorder list控制的圖片菜單中就遇到過類似的問題。
盡快各種不同的瀏覽器都有css bug,但是css頁面布局方式發展到今天，已經比較成熟了，因為bug而讓你抓狂不已的發生機率已經不大了。如果有問題，多查查搜索引擎能夠解決你大部分的問題。如果，平時閑著的時候，可以作些試驗的話，也許更能夠在緊急情況下也能夠泰然自若。
HTML/CSS技術：關于居中布局和IE雙倍邊距bug，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
