浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下
8 Q' s& c h( E. A' Z0 t 4 b- |* {4 e- N- d0 b% |; j
一、IE浏览器中设置div或table为水平居中: 7 n# Y; W$ Q4 O, K- d5 g
6 E5 d; Z. S+ w# p8 I
IE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center} 3 q9 C b u7 c6 Y/ d- @9 L; f6 i
. I! s: v. G% Q0 ~3 e$ {9 N
二、FIREFOX浏览器 层或table水平居中: ' S7 ]" P" f* a; F; Y% o1 u
#mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div>
/ [8 S9 x( Q2 y# G9 L或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
2 M8 C6 z5 v$ ]" H8 v或者 <div style="width:900px;margin:auto;text-align:left"> </div>
: {+ k) k0 ]- N9 a) f & N/ l$ ^2 |& N( B4 h' ?
三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法 ! Z( n- `8 n9 d2 U% b
body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|