本文介绍了一种在不同浏览器下实现元素居中的CSS布局方法。通过设置body元素的text-align属性为居中，并结合div子元素的margin-right和margin-left为auto，确保了在IE和Mozilla等浏览器中的一致性表现。
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
完整举例代码如下：
[html]
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
}
</style>
</head>
<body>
<div id="center"></div>
</body></html>
[/html]
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
完整举例代码如下：
[html]
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
}
</style>
</head>
<body>
<div id="center"></div>
</body></html>
[/html]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
