div层火狐居中在ie不居中的解决办法

admin · 发表于 2013-9-1 10:54:22

本文章来总结关于div层火狐居中在ie不居中,在IE6/7/8中用margin:0 auto;无法实现居中的解决办法。

一般的我们所说的居中有两种，层的居中和层内的居中，层的居中我一般都用：margin:0 auto;(或者 margin-left: auto;margin-right: auto;) 这样的写法；层内的居中（我一般都用于层内的文字）：text-align:center;

这段代码在FF中可以居中，而在IE6/7/8中均不能居中。换成：MARGIN-RIGHT: auto; MARGIN-LEFT: auto;也一样，而且，居右margin:0pt 0pt 0pt auto;的也失效了

问题并不在CSS而在XHTML网页本身，

需要加上这样的代码才能使得上述设置有效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

复制代码

如果没有这句话，在IE6/7/8中只用margin:0 auto;是无法实现居中的，而在FF中却可以。

如果加了doctype声明，则在一个body下的div，只用margin:0 auto;即可在IE和FF中都实现居中。

例

DIV在整个body中水平居中：

#DivComment{
position:absolute;
top: 90%;
left: 45%;
width:40%;
margin:0 0 0 -240px;
padding: 10px 10px 0px 0px;
}

复制代码

实例

DIV在另一个DIV中水平居中：

#div1{
TEXT-ALIGN: center;
}
#div2{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
}

复制代码

在要居中的div的父级元素（未必是div，可以是ul、li等）中设置TEXT-ALIGN: center;即可实现此div居中，但仅限于IE6&IE7。在此div中加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto;或者margin: 0 auto;即可实现在firefox中也居中。

ipkm · 发表于 2014-3-1 18:28:43

不错，看看！

		自动登录	找回密码
密码			注册

div层火狐居中在ie不居中的解决办法

相关帖子

浏览过的版块