css布局网页水平居中常用方法__text-align_wrapper_width_平居中_center_

当前位置: 编程技术>WEB前端

css布局网页水平居中常用方法

来源: 互联网发布时间：2014-10-04

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

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

代码如下:

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;   
}  

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

本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。