margin:0pxauto居中问题解决方案

开发 前端
网页布局中关于margin:0pxauto居中问题还是比较常见的,这里和大家描述一下,margin:0pxauto适用于div与其它无素,比如p,img等。

本文向大家描述一下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头如下: 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>无标题文档</title> 
  8. </head> 
  9. <body> 
  10. 主题内容  
  11. </body> 
  12. </html> 
  13.  

   3:DOCTYPE前还有代码,导致不生效。 
         
  我试了一下,只要在
 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  

  这一句前加了一个<!--说明文字-->这样的注释,也同样出现了margin:0pxauto;无法居中的情况。  
    
  4:使用text-align:center。

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

【编辑推荐】

  1. CSS Positioning定位详解
  2. IE6.0对padding的解读分析
  3. IE6双倍margin间距解决方法
  4. CSS overflow溢出属性
  5. CSS中cellspacing和cellpadding属性用法揭秘

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-08-26 12:59:29

marginCSS

2010-08-23 14:06:57

DIV+CSS

2012-05-09 10:08:41

跨机房

2010-08-30 12:46:42

DIV+CSS

2010-03-30 16:04:34

Linux Nginx

2010-09-27 13:14:42

JVM内存限制

2010-10-08 13:09:38

JavaScript数

2010-05-31 12:53:56

Nagios apac

2010-02-06 14:54:11

C++指针漂移

2010-04-28 19:24:17

Hp unix

2011-03-23 16:38:28

LAMP

2010-08-04 10:20:30

Flex组件开发

2010-09-07 09:08:03

DIV弹出层

2010-04-06 09:33:37

CentOS系统

2010-10-09 12:58:59

JS脚本兼容

2021-01-13 10:18:29

SocketNetty粘包

2010-07-30 12:40:00

Flex跨域访问

2010-09-15 14:14:29

IE6position

2010-05-04 11:30:29

Oracle汉字长度

2010-02-23 17:49:56

WCF传输大数据
点赞
收藏

51CTO技术栈公众号