浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下
, Y- u6 R) i- w. b8 A$ O
1 C& @1 m( F0 j1 u, M/ ?一、IE浏览器中设置div或table为水平居中:
6 O# f4 W$ y2 ^7 {& E
4 C o3 |, ^( ` v+ b+ k% [. z5 lIE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center}
1 Z; A! A2 g% N+ t: ^1 v
$ @' N( g7 m9 F4 i( f二、FIREFOX浏览器 层或table水平居中:
* g3 c5 [+ D& Q2 {& m; I1 K4 g6 O #mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div>
- M6 H3 E; Q" C$ O' k$ {/ i" U或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div> 7 n; Q" b+ I6 e: f2 G5 y
或者 <div style="width:900px;margin:auto;text-align:left"> </div> % I4 I) K1 o$ W+ ~3 i1 n$ T1 N
7 O2 d$ z% e+ f. G
三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法 $ R; E( |3 z# j8 C+ b1 E
body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|