浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下 0 d& u: C4 [, A B1 y
& ^) q5 @4 A' Z: r
一、IE浏览器中设置div或table为水平居中: # j# T0 W, o- i" {
( [ @+ N9 G1 P5 ~6 s7 E
IE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center} / m0 w6 Q& I* E5 g5 F6 e- e
. f8 _) x7 {% ^3 ?3 z
二、FIREFOX浏览器 层或table水平居中: 9 z+ d+ J9 N# s- g1 Y$ E; \$ ~
#mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div> ) B n; j9 E5 E. `9 v
或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
0 Z' j- h/ ? r* @或者 <div style="width:900px;margin:auto;text-align:left"> </div>
" ^- w1 y6 [- I+ I$ \ }0 _
- h3 {; @* G! Q2 Q6 D% ?4 Y三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法
+ v0 X, q( \, }4 E! a body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|