浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下 / b; o9 B! p6 S" o! z8 P
& a" o- h; _0 K+ L2 _( n) J
一、IE浏览器中设置div或table为水平居中: ; J3 n. A/ T1 S ^. _/ a Q
8 `$ }4 L2 n6 Z8 \# Q8 |7 PIE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center} ' x# a7 `" E" A9 \ k* C$ r3 q# W) W
: I2 ^- A: b' I+ N- e: t二、FIREFOX浏览器 层或table水平居中:
2 `6 r0 M% N6 b$ e# Q. Y1 f #mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div> ( W; v/ h6 H% `$ I6 }3 Y# O
或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div> " S' ?7 j: o, \1 n( }" @
或者 <div style="width:900px;margin:auto;text-align:left"> </div>
( K- w& F6 j' l, F" I' {( S! R4 t/ G( C 4 i+ w O. R1 U( j v7 O: q
三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法 - ?1 a9 g& I+ V" P1 y
body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|