在平时写网页的时候可能会遇到的一个常见问题,就是在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>
网友评论