首页 >web前端 >css教程 >css布局网页水平居中常用方法_经验交流

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

PHP中文网
PHP中文网原创
2016-05-16 12:06:341523浏览

页面水平居中一般会令人很头疼,尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。 
以下内容参见《精通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中文网(www.php.cn)!


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn