浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下
% O- L: B. V6 M% _% h) S/ W& d
/ O3 I+ {: l" A: b( f9 O. H! p一、IE浏览器中设置div或table为水平居中:
! a2 _0 }1 o5 ~! S- ^ # g8 \- N9 x7 J7 [% O* h
IE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center} $ D( _; j- e: e e7 S9 J
/ T! O1 {& f' s2 k* \1 L
二、FIREFOX浏览器 层或table水平居中:
& G- N; Z) _ T #mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div> ! K. W+ `% d, Y% u4 A
或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div> & A5 y/ u/ c, d
或者 <div style="width:900px;margin:auto;text-align:left"> </div>
! c4 l4 r! P# ^' e4 O - I3 S0 m+ F! N1 p3 `
三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法 # s" ~3 W2 N! {9 Y4 f
body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|