css控制页面居中

最新推荐文章于 2025-11-25 14:29:34 发布

转载最新推荐文章于 2025-11-25 14:29:34 发布 · 508 阅读

文章标签：

#css #mozilla #html #div #ie

班门弄斧专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在不同浏览器下实现元素居中的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]