元素水平居中方案全集_CSS/HTML

先來看我一個簡單XHTML/HTML檔案程式碼（部分），我們的目的是讓#container水平居中。

 

 

content

 

Lorem?ipsum?dolor?sit?amet,?consectetuer ?adipiscing?elit.Phasellus?varius?eleifend.

使用自適應邊界（auto?margin）
水平居中任意元素的首選辦法是使用邊界（margin）性質（property），並把左右之值設為auto。但你必須為#container指定一個寬度。

div#container?{
 margin-left:?auto;
 margin-right:?auto;
 width:?168px;
}
這個方案在任何當代瀏覽器上都有效，即使是IE6，前提是在web標準相容模式下（compliance?mode）。不幸的是，它不會在先前版本的IE/Win中工作。我們為此列一個表格：

瀏覽的自適應邊界支援一覽表?瀏覽器?版本?支援?
Internet Explorer 6.0, compliance?mode?是?
Internet Explorer 6.0, quirks?mode?否?
Internet Explorer 5.5 Windows?否?
Internet Explorer 5.0 Windows?否?
Internet Explorer 5.2 Macintosh?是?
Mozilla 所有目前版本?是?
Mozilla Firefox?所有版本?是?
Netscape?4.x?否?
Netscape?6.x+?是?
Opera?6.0,?7.0?Macintosh?and?Windows?是?
Safari?1.2?是?

儘管受到瀏覽器支援的限制，大部分設計師還是提倡你盡可能這樣做。但我們依然可以使用CSS應付一切情況。

使用文字排列（text-align）
此方案需要使用到text-align性質，應用給body元素並且賦予center的值。

body{
 text-align:center;
}
它公正地對待各種瀏覽器，十分徹底，唾手可得。然而，這是賦予文本的性質，它使#container中的文本也居中了。所以，在版面上我們還得做一些額外工作：

div#container{
 text-align:?left;
}
這樣才可以把文字的對齊方式回傳預設狀狀態。

綜合邊界和文字排列
因為文字排列向後相容，當代瀏覽器也支援自適應邊界，許多設計師把他們結合起來，實現跨瀏覽器使用。

身體{
text-align:?center;
}
#container?{
 margin-left:?auto;
margin-right:?auto; border :?1px?solid?red;
 width:?168px;
 text-align:?left
}
唉，依然不完美，因為還是一個黑客技巧?（hack）。你必須為文本排列寫下多餘的規則。但現在，我們可以使用更完美的跨瀏覽器的方案。

負邊界解

此方案得結合使用絕對定位（absolute?positioning?）。首先，把#container絕對定位並左邊偏移 50%，這樣，#container的左邊界就是頁面解析度的一半。下一步，把#container的左邊界設定為負值，值大小為#container寬 度（width）的一半。

#container?{

background:?#ffc?url(mid.jpg)?repeat-y?center;
 position:?absolute;
 left:?50%;
 width :?760px;
 margin-left:?-380px;
}
看，沒有任何駭客技巧（no?hacks）！連Netscape?4.x都支援！