首页 >web前端 >css教程 > 正文

css布局网页水平居中常用方法_经验交流

原创2016-05-16 12:06:340638
页面水平居中一般会令人很头疼,尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。
以下内容参见《精通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;   
}


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

以上就是css布局网页水平居中常用方法_经验交流的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 专题推荐

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类