浏览器兼容问题:今天打开网页发现在IE中居中正常,在FireFox中整个也面都靠在左边了。打开代码,发现是table结构,只做了个table居中。加上div align=“center”之后FF中是正常了,但是IE中表格里面文字也居中了。然后想到固定宽度,让左右外边距都自动,试了下,果然好使。顺手记下 3 {* C& h5 U- s6 ?: P
) Y$ L x. M( A, j
一、IE浏览器中设置div或table为水平居中:
" I% M7 ?3 x% {3 `2 G( {9 e
/ J( ? d& z4 UIE中在body中加入text-align:center,即可实现布局居中。 body{text-align:center} , m x! j' H" o- }1 E- {$ q
! i& X t# e0 S7 L* z
二、FIREFOX浏览器 层或table水平居中: 5 J' U& ^( h Y1 z' H
#mydiv{margin-left:auto;margin-right:auto} <div id="mydiv"> </div> , A9 y( |' X8 G3 Z0 ~# ~& `
或者 .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
4 n2 L* ~4 p1 `) R w. B或者 <div style="width:900px;margin:auto;text-align:left"> </div>
" g* L% |0 ~) n8 q/ }7 a* I / x* I# N& T& s% h
三、因此,想要让DIV或table在IE浏览器和FIREFOX浏览器都水平居中,需要采取两种设置方法 + l. g* s6 m$ [ n! h1 t
body{text-align:center} .mydiv{width:900px;margin-left:auto;margin-right:auto} <div class="mydiv"> </div>
|