说明:本文原载于<< 精通CSS >>(人民邮电出版社) 第七章,感觉写的很精彩,经亲自实验,附以笔记,拿出来与大家分享.
方法一: 使用自动空白边,让设计居中.
假设现有一个布局,希望容器div中的内容在屏幕上水平居中:
<body>
<div id="wrapper">lunji.com
</div>
</body>
为此,我们将容器的宽度定义,然后将容器的水平空白边设置为 auto;
#wrapper{
width:720px;
border: 1px solid;
margin: 0 auto;
}
这在所有现代浏览器都是有效的.但IE5, IE6不支持自动空白边, 但IE将text-align:center误解为让所有的东西都居中,而不只是文本.可以利用这一点,让主体标签中的所有东西都居中,包括容器div,然后将容器内的内容重新左对齐就可以了.
[注: 我测试了netscape 8.12, FIREFOX2.0, IE 7,结果是IE7.0仍是不支持
]
修正后的样式代码:
body{
text-align:center;
}
#wrapper{
width:720px;
border: 1px solid;
margin: 0 auto;
}
为了使所有浏览器中都能顺利工作,需要做的最后一件事就添加代码在body中,body{min-width:760;},因为在NETSCAPE6中,当浏览器窗口宽度减小于容器宽度时,容器左边会跑到屏幕外边,为了防止这种现象,需要将主体无素的最小宽度设置为等于或略大于容器宽度(笔记: NETSCAPE 8.12已经修正此问题).
body{
text-align:center;
min-width:760px;
}
#wrapper{
width:720px;
border: 1px solid;
margin: 0 auto;
}