欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-14 17:57:03
...
页面水平居中一般会令人很头疼,尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。
以下内容参见《精通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)!