浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下
$ _4 ^7 s0 ~% [* Y( x( S. V' J% ]
! A d8 p$ u! ~) Y% S7 h一、IE浏览器中设置div或table为水平居中:
. Q$ d0 M# U; w1 T
2 r% p' ^! h+ x, Z. \! EIE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center}
8 D7 [0 ]3 E- t6 s$ \! `
: H! ~( R6 M% k% J- Y# l9 J二、FIREFOX浏览器 层或table水平居中:
! q* z& J' S; A! M$ Z5 G8 v: N" C/ C, {9 M #mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div> 1 @; @. s" C% G9 C0 `6 J+ N/ I7 f0 H
或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div> / w4 n+ o! ^' X1 L% F1 {( e$ X
或者 <div style="width:900px;margin:auto;text-align:left"> </div>
, y. Q5 Y7 ^8 {& G- c$ c0 h
" ]5 b, \" y% [" B$ w三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法
1 ], v2 _1 t, z! t0 Y body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|