本文向大家描述一下margin:0pxauto居中问题,使用margin:0pxauto;居中是大家在做cssdiv定位时的最常用方法,这里总结的内容在ie67以及fifefox下都可正常使用。
margin:0pxauto居中问题
margin:0pxauto;适用于div与其它无素,比如p,img等。
使用margin:0pxauto;居中是大家在做cssdiv定位时的最常用方法,但是据我自己的使用过程来看,常有居中不了的情况。本文所总结的内容,在ie67以及fifefox下都可正常使用。
下面来逐一分解一下:
1:与margin:100px混用,导致无法居中。
这种情况下,因为前面设了margin:0pxauto;,但是后面又设了margin:100px,这明显是相矛盾的,不仅如此,如果同时使用了margin:0pxauto;和float:left,也一样都不生效。
2:没有指定DOCTYPE。
DOCTYPE是指定浏览器以哪一种标准解析html代码,如果不指定,极有可能会不生效。
我们常见有人写html,是直接以<html>开头的,这种情况,我们只要再加上DOCTYPE头即可以,***是直接从dw中新建一个html头,然后从中再做修改。完整的html头如下:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>无标题文档</title>
- </head>
- <body>
- 主题内容
- </body>
- </html>
3:DOCTYPE前还有代码,导致不生效。
我试了一下,只要在
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这一句前加了一个<!--说明文字-->这样的注释,也同样出现了margin:0pxauto;无法居中的情况。
4:使用text-align:center。
这是下下之策,如果上面margin:0pxauto;用了怎么都不行,那到body中加上text-align:center;吧,如此一下不仅是div,文字也会居中显示。
然后可以再到细化的css中,把相应容器再设成text-align:left再达到文字靠左的效果。
【编辑推荐】
- CSS Positioning定位详解
- IE6.0对padding的解读分析
- IE6双倍margin间距解决方法
- CSS overflow溢出属性
- CSS中cellspacing和cellpadding属性用法揭秘