当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css布局网页水平居中常用方法

CSS样式表
论WEB标准在中国的灰飞烟灭
CSS 清除浮动元素方法 整理
css FF与IE兼容性总结
div css 鼠标悬停在div层上时,div背景色改变
IE6不支持CSS中的min-width/height属性问题的解决方法
CSS 自动定位 的应用
CSS 样式命名规则
IE7下生成高质量CSS缩略图
编写CSS代码时样式的命名规则
用css来实现透视效果
word-wrap
div+css排版的样例
HTML结构化:实践DIV+CSS网页布局入门指南
CSS锦囊
DIV_圆边圆角的实现
凹陷文字 推荐
自定义容器和字体大小
IE最新的欺骗代码
ASP+CSS 实现列表隔行换色
无边框表格

CSS样式表 中的 css布局网页水平居中常用方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 103 ::
收藏到网摘: n/a

页面水平居中一般会令人很头疼,尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。
以下内容参见《精通CSS》。
HTML代码:
复制代码 代码如下:

<body>
<div id="wrapper">
</div>
</body>
IE居中办法:
body {
text-align:center;
min-width:760px;
}
#wrapper {
width:720px;
text-align:left;
}

IE会将text-align:center 误以为让所有东西居中,而不只是文本。然后将容器的内容重新对准左边即可。
非IE:
复制代码 代码如下:

#wrapper {
width:720px;
margin:0 auto;
}

如何兼容IE和非IE?如下:
复制代码 代码如下:

#wrapper {
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}

首先将容器左边边缘定位到页面中间,然后向左移动它宽度的一半。