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

CSS样式表
Flash页面如何通过校验
静态页面加密
如何禁止打印页面
比较不错的打印效果 css
!important在ie7.0的hack方法
最基本的几种 CSS 文字滤镜效果
HTML中的图象标签属性
marquee的详细用法解析
使用#default#userdata组件实现的可记忆内容的编辑器
li的简单应用(将前面的点换成图标)
windows的listview一样,而且不能把表头从表格里面独立出来
一些不标准的东西,不过还是有点用处
用js控制css的不错的方法
CSS解决未知高度垂直居中
在线ASC码查询
关于CSS:优先级
文字或图片元素在DIV中垂直居中
Mozilla建议的CSS书写顺序
微软终于对网页三剑客下手了
div+css布局入门

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


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

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