轉自：http://bbs.csdn.net/topics/340170231
昨天在論壇里溜達的時候，發現有同學遇到了居中的問題，頁面在 IE 里居中對齊好好的，為什么在其他瀏覽器里面就不靈了呢？
我曾經也在寫一個 JS 日歷的時候也被居中弄的焦頭爛額，苦不堪言。想必不少人都遇到過這個問題吧。
我大致看了一下，發現是 “text-align:center” 的兼容性引起的。下面就這個問題跟大家分享一點我的經驗。
先來看看 W3C 標准中是怎么說的。
在W3C CSS2.1規范第16.2節 對text-align 有詳細地描述： ------------------------------------------ 值： left | right | center | justify | inherit 初始值：匿名值，由'direction'的值而定，如果'direction'為'ltr'則為'left'，如果'direction'為'rtl'則為'right'。 應用於: 塊級元素，表格單元格，行內塊元素 繼承性: 是 計算后的值：初始值或指定值 ------------------------------------------
這個特性描述了如何使一個塊元素的行內內容對齊。
注意一點，標准里說這個屬性是用來對齊行內內容的，所以，不應該對塊級內容起作用。
解釋一下，行內內容是說由行內元素組成的內容，行內元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素樣式的 ‘display : inline’ 的都是行內元素；塊級內容跟則是由塊級元素構成，DIV 是最常用的塊級元素。塊級元素和行內元素的區別是，塊級元素會占一行顯示，而行內元素可以在一行並排顯示。
這樣，我們對這個特性的認識應該就清楚了。但是，問題來了，雖然標准里這么規定，那么是不是所有瀏覽器都遵守呢？答案是否定的。猜猜是哪個瀏覽器這么特立獨行啊？ IE！！
IE6/7及IE8混雜模式中，text- align:center可以使塊級元素也居中對齊。其他瀏覽器中，text-align:center僅作用於行內內容上。
解決這個問題比較好的方式，就是為所有需要相對父容器居中對齊的塊級元素設置“margin-left:auto; margin-right:auto”。但這個方式 IE6/IE7/IE8的混雜模式中不支持，所以還要設置父容器的 "text-align:center;"。
若居中對齊的子元素內的行內內容不需要居中對齊，則還需要為其設置“text-align:left”：
|
1
2
3
4
5
6
7
8
9
10
|
<
style
>
* { font-family:Consolas,Verdana,Arial; font-size:12px; }
div, center { border:3px solid dimgray; padding:2px; }
span { background:lightgrey; }
</
style
>
<
div
style
=
"width:200px; text-align:center;"
>
<
div
style
=
"width:100px; margin:0 auto; text-align:left;"
>
<
span
>text</
span
>
</
div
>
</
div
>
|