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

CSS样式表
CSS网页设计 IE8和IE7共存
CSS2 打印属性让打印HTML文档不出问题
制作网页中设计段落缩进的方法
CSS border 属性使用说明
CSS border-style 属性使用方法
CSS border-color 属性使用方法
CSS border-width 属性使用教程
CSS padding属性定义边内补白
CSS margin 属性定义边外补白
网页布局教程 掌握CSS网页布局属性
css 背景样式属性说明
span margin 设置生效
html 滚动条在IE6和IE7中兼容性问题
IE6 两个div有间隙的问题（IE 3px bug）
CSS 数字和字母将容器撑大问题解决
换个角度看页面重构中的语义化
DIY属于个人开发使用的CSS Reset
CSS 空格引起网页布局间距问题
CSS 网页制作时遇到问题的快速参考技巧
css li 去掉点的样式写法

No. « 20 21 22 23 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 104 ::
收藏到网摘: 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;
}

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