CSS常見的讓元素水平居中顯現(xiàn)辦法（二）

　　3.組合使用主動(dòng)外邊距和文本對(duì)齊

 

　　因?yàn)槲谋緦?duì)齊居中辦法有著杰出的向下兼容性，且主動(dòng)外邊距辦法也被大多數(shù)當(dāng)代瀏覽器支撐，所以很多設(shè)計(jì)師將二者組合起來使用，以期讓居中作用得到大極限的跨瀏覽器支撐：

 

　　body {

 

　　text-align: center;

 

　　}

 

　　#container {

 

　　margin-left: auto;

 

　　margin-right: auto;

 

　　border: 1px solid red;

 

　　width: 168px;

 

　　text-align: left

 

　　}

 

　　可是這始終是個(gè)hack，無論如何也算不上完美。咱們?nèi)允切枰獮榫又腥萜髦械奈谋揪帉懜郊拥囊?guī)則，但至少在各個(gè)瀏覽器中看起來都不錯(cuò)。

 

　　4.負(fù)外邊距解決計(jì)劃

 

　　負(fù)外邊距解決計(jì)劃遠(yuǎn)不是僅僅為元素增加負(fù)外邊距這么簡(jiǎn)略。這種辦法需要同時(shí)使用絕對(duì)定位和負(fù)外邊距兩種技巧。

 

　　下面是該計(jì)劃的具體實(shí)現(xiàn)辦法。首先，創(chuàng)建一個(gè)包含居中元素的容器，然后將其絕對(duì)定位于相對(duì)頁面左邊邊際50%的方位。這樣，該容器的左外邊距將從頁面50%寬度的方位開始算起。

 

　　然后，將容器的左外邊距值設(shè)置為負(fù)的容器寬度的一半。這樣即可將該容器固定在頁面水平方向的中點(diǎn)。

　　#container {

 

　　background: #ffc url(mid.jpg) repeat-y center;

 

　　position: absolute;

 

　　left: 50%;

 

　　width: 760px;

 

　　margin-left: -380px;

 

　　}   

 

　　看，沒有任何hack！盡管這并不是首選的解決計(jì)劃，但也是個(gè)不錯(cuò)的辦法，且適用性極廣—甚至在Netscape Navigator 4.x中都沒有任何問題，很令人吃驚，不是嗎？所以若想得到廣泛的瀏覽器支撐，那么這種辦法將會(huì)是好的挑選。