CSS 网页布局 DIV 水平居中的各种方法
2009 年 04 月 23 日 22:54
容器中的内容居中：text-align: center
容器在上层容器中居中：margin-right: auto; margin-left: auto;
.a{margin:0px auto;} (div class="a"中的内容居中。b 在 a 中也会居中)
.b{margin:0px auto;}（b 中的内容居中)
在 Web 标准中的页面布局是使用 Div 配合 CSS 来实现的。这其中最常用到
的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先
掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使
用 Div 和 CSS 实现页面水平居中的方法：
一、margin:auto 0 与 text-aligh:center
在现代浏览器（如 Internet Explorer 7、Firefox、Opera 等）现代浏览
器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。意
即：
#wrap { margin:0 auto;}
上面这段代码的意思是说使 wrap 这个 div 到左右两侧的距离自动设置，
上下为 0（可以为任意）。请在现代浏览器（如 Internet Explorer
7、Firefox、Opera 等）中运行现在的代码：
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ new document ＜/title＞
＜meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" /＞
＜style type="text/css"＞
div#wrap {
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞
在 Firefox 等现代浏览器设定页面元素的水平居中，只要指定 margin:0
评论0