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

前端  /  管理员 发布于 7年前   177

页面水平居中一般会令人很头疼，尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。 

以下内容参见《精通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框架布局的缺点和优点小结
    下一条：
    大家看了就明白了css样式中类class与标识id选择符的区别小结

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客