15212260052 周一~周六, 8:30 - 18:00
527352997@qq.com 随时欢迎您前来咨询!
留学生园D座5楼 芜湖市经济技术开发区科创中心

新闻资讯

15212260052
您的当前位置:首页 > 技术支持 > 详细内容

CSS网页布局DIV水平居中的各种方法

来源:www.whudows.com 发表时间:2018-01-24

  在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:

  一、margin:auto 0 与 text-aligh:center

  在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。意即:

  #wrap { margin:0 auto;}

  上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。请在现代浏览器(如Internet Explorer 7、Firefox、Opera等)中运行现在的代码:

  在Firefox等现代浏览器设定页面元素的水平居中,只要指定margin:0 auto;即可

  div#wrap {

  width:760px;

  margin:0 auto; /*这里的0可以任意值*/

  border:1px solid #ccc;

  background-color:#999;

  }

  上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的,不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的,即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center,这样页面内所有的元素都会自动居中,同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码:

  body {text-align:center;}

  #wrap {text-align:left;}

  这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果,我们就可以这样写我们的代码:

  body { text-align:center; }

  #wrap { text-align:left;

  margin:0 auto;

  }

  在Firefox等现代浏览器设定页面元素的水平居中,只要指定margin:0 auto;即可

  div#wrap {

  width:760px;

  margin:0 auto; /*这里的0可以任意值*/

  border:1px solid #ccc;

  background-color:#999;

  }

  在Internet Explorer 6 及以下的版本中我们还要做以下的设置:

  body { text-align:center; }

  div#wrap {

  text-align:left;

  }

  不过这里有一个前提,就是设置居中的元素要有固定的宽度,比如这里我们设定了为760像素。

  

相关新闻
相关产品

微分销

小程序如何快速注册?

小程序审核通过后,在微信小程序中无法搜索到?

小程序和公众号、app的区别?

小程序的入口在哪里需要下载吗?