浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下
0 m+ {* v$ D+ f& J 3 J( U4 f0 q2 a( z6 W6 k0 x, Q8 R7 J
一、IE浏览器中设置div或table为水平居中:
) ?; m; s5 n3 U) Y
: a1 B8 _8 G9 F; W0 ^& hIE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center} : X, i: e2 ~( ^! ?
3 [, u* F3 |" V二、FIREFOX浏览器 层或table水平居中:
$ X; | D, s }3 a( D #mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div>
% W/ n* m. w0 W0 {或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
4 P' c4 u' M$ {+ i# O+ z4 s0 ?- E或者 <div style="width:900px;margin:auto;text-align:left"> </div> $ q% d' J9 }' Z) X4 V6 \- G+ j
) E4 c! X# y- w! @/ L4 t
三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法 ' u) E/ x, g; ^8 ~9 M1 Y# r
body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|