margin:0px auto居中问题

margin:0px auto;适用于指定了固定宽度的div与其它元素,比如p,img等。  

  
  使用 margin:0px auto; 居中是大家在做css div定位时的最常用方法,但是据我自己的使用过程来看,常有居中不了的情况。本文所总结的内容,在ie6 7以及fifefox下都可正常使用。

  1: 与 margin:100px 混用,导致无法居中。 
            
  这种情况下,因为前面设了margin:0px auto; 但是后面又设了margin:100px,这明显是相矛盾的,不仅如此,如果同时使用了margin:0px auto ; 和 float:left ,也一样都不生效。 

  2: 没有指定DOCTYPE   
          
  DOCTYPE是指定浏览器以哪一种标准解析html代码,如果不指定,极有可能会不生效。 
  我们常见有人写html,是直接以<html>开头的,这种情况,我们只要再加上DOCTYPE头即可以,最好是直接从dw中新建一个html头,然后从中再做修改。完整的html头如下: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
主题内容
</body>
</html>

   

  3:DOCTYPE前还有代码,导致不生效。 
         
  我试了一下,只要在
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  这一句前加了一个<!-- 说明文字 -->这样的注释,也同样出现了margin:0px auto;无法居中的情况。  
    

  4:使用text-align:center; 
  这是下下之策,如果上面margin:0px auto;用了怎么都不行,那到body中加上text-align:center;吧,如此一下不仅是div,文字也会居中显示。  
  然后可以再到细化的css中,把相应容器再设成text-align:left再达到文字靠左的效果。

  使用 text-align:center; 居中时不能添加 doctype 声明,否则将不生效  

 还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样,其原意可能在于设置了margin-top的高度不为0时,会出现意想不到的效果。

  

posted @ 2011-06-21 10:00  hunter001  阅读(9122)  评论(0)    收藏  举报