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

CSS样式表
可以给img元素设置背景图
不通过JavaScript实现的自动滚动视差效果
学DIV+CSS技术,如何入门?
XHTML+CSS制作样式风格切换的WEB站点
解决IE6.0、IE5.0、IE5.5差异
DIV+CSS制作的个性水平导航菜单实例
css里expression实现界面对象的批量控制
利用CSS框架进行高效率的站点开发 Elements
CSS模块化设计:从空格谈起
在IE流览器中正确显示PNG透明图片
CSS样式表创建美妙绝伦的网站
性感的CSS菜单(Menus)
CSS教程关于css框架网页设计
以HTML为基础学习DIV+CSS
提高CSS文件可维护性的五种方法
dl、dt、dd 标记来改造163邮箱的广告条
WEB前端涉及的布局、结构化和标准化
CSS网页制作布局实例教程
CSS教程:认识层叠规则互相作用
ul结合CSS制作网页相册滑动浏览效果

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


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

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