首页 > 开发 > CSS > 正文

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

2020-10-23 18:37:26
字体:
来源:转载
供稿:网友

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

以下内容参见《精通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;  } 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表