浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下 + P5 F3 i$ T# d/ r; u
( V+ @) }- g& I6 c0 n# [一、IE浏览器中设置div或table为水平居中:
, t! {! x- B3 ]1 o 3 x. z! j; [4 H
IE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center} & W. `/ v* h: [" F% O; u4 T& V
" f& `) Y% u% y/ `3 t7 b
二、FIREFOX浏览器 层或table水平居中: ! v' X3 h1 |: c( O T C+ n2 H
#mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div>
! `0 k) m. y3 e或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
5 q7 t: d: G3 f" H) Q y3 @8 U5 d, I* P或者 <div style="width:900px;margin:auto;text-align:left"> </div> . ]0 ?7 t6 `* H: ]/ h D2 o
/ p4 n; Q3 h3 F# z/ O4 ]5 ~! W三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法 8 ], b& T: j( [& n6 W3 a S) d
body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|