浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下
4 P) y4 S( S1 T2 V, { 3 ?# `, {( J% Q f
一、IE浏览器中设置div或table为水平居中: 6 s: |" }. s g
2 @; u. _/ D& W7 m
IE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center} % I* Z/ k+ ~1 ~7 @$ P$ D: ?$ Q
( E( P1 u( u8 \/ j7 x8 H) o二、FIREFOX浏览器 层或table水平居中: : M- ]: c# k2 k# W
#mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div> : |5 B$ ]; I; l; f6 `4 o0 s
或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div> 6 d. G' \' j) D- B+ y
或者 <div style="width:900px;margin:auto;text-align:left"> </div> & p w" w Z' } I5 v# ^
% T, |6 K$ y4 v1 A9 s: m" k
三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法 2 d/ a8 w! z* ^7 a/ B
body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|