当前位置:首页 >> HTML+CSS>>正文

margin:0 auto;水平居中不生效的几个原因

栏目:HTML+CSS时间:2017-03-01热度:

  在平时写网页的时候可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果。margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应。以达到水平居中的效果。在此介绍几种可能造成margin:0 auto;不起作用的原因:

  1、没有设置宽度

  <div style="margin:0 auto;"></div>

  看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题!

  2、使用可float属性

  无论float:left和float:right都不能使用。

  3、没声明DOCTYPE

  DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  4、IE浏览器解决margin:0 auto;不居中的方法

  在<body>或者在要居中的div外层添加多一个div,并使其居中

  例如:

  <style type="text/css">

  #con{width:980px;martin:0 auto;}

  </style>

  <div style=“text-align:center”><div id="con">margin: 0 auto 内容居中显示</div></div>


相关文章

热门标签

最新评论