您所在的位置： &
CSS中margin:0无法居中解决方法
CSS中margin:0无法居中解决方法
CSS中margin:0的意思就是：上下边界为0，左右根据宽度自适应！很多初学制作网页的朋友可能会遇到CSS中加了margin:0却没有效果这个问题，这里分享一下CSS中margin:0无法居中解决方法。
本文向大家描述一下CSS中margin:0无法居中解决方法，中加了margin:0却没有效果，不能居中的问题！margin:0的意思就是：上下边界为0，左右根据宽度自适应！其实就是水平居中的意思！
CSS中margin:0无法居中解决方法
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0却没有效果，不能居中的问题！margin:0的意思就是：上下边界为0，左右根据宽度自适应！其实就是水平居中的意思！在这里说两个典型的错误引起的不能居中的问题：
1、没有设置宽度
divstyle=&margin:0&&&
看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！
2、没声明DOCTYPE
①DOCTYPE是documenttype（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！
②看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的！&
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Transitional//EN& &&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&
③你有三种选择，用来声明DOCTYPE
◆过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：&
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Transitional//EN& &&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&
◆严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如&br&，完整代码如下：&
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Strict//EN& &&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&&
◆框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：&
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Frameset//EN&& &&http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&&&
④至于选择哪种。。使用过度的就可以了。
说了半天，margin:0不起作用，不能居中的话，看看你的文档最顶端有没有声明DOCTYPE，没有就复制粘贴一下，就可以了！
文章来自:/html/wlzy/7.html
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&的更多文章
IE浏览器不支持很多CSS属性是出了名的，即便在支持的部分中，也
国内网盘的关停让用户操碎了心 下一个风口在哪
《待字闺中：编程面试题集》集合最新最全的面试经验和
这周Windows8.1正式版发布了，不知道各位有没有去更新
十一长假归来上班，好像更累了；早上也越来越堵了。小
本书全面介绍了Windows Server 2003 R2中最常用的各种服务，包括域名服务、动态IP地址服务、Windows名称服务、活动目录服务、Web
51CTO旗下网站正确的使用margin:0auto与body{text-align:}实现元素...
　　昨天深夜的时候，有朋友在/ask提出一个问题：body{text-align:center}与margin:0 auto的异同？这是一个对齐上的迷惑，刚开始的时候或许大家对它们都不是很理解。我们通过下面的一些小例子来了解他们到底有什么区别，应该在什么样的情形下正确的使用body{text-align:center}与margin:0 auto。我们首先了解一下它们的基本概念：　　text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置，如：
　　div { text-align: } 表示文本居左对齐。
　　margin是设置对象四边的外延边距，被称为外补丁或外边距。如：
　　div { margin: 20px 10px 30px 40 } 　　表示对象外边距，顶20px、右10px、下30px、左40px。
　　我们设置某个对象水平方向居中的时候，经常将左右的外边距设置为auto来实现。如：
div { margin: 0 }
　　现在的问题是：body{text-align:center}与margin:0 auto的异同。text-align:center设置为文本或img标签等一些内联对象（或与之类似的元素）的居中。margin:0 auto是设置块元素（或与之类似的元素）的居中。但这两个属性IE与FF的理解也有所不同。　　我们设置一个段落P，在段落内存在一个图片img标签。　　我们设置body{text-align:}。得到下面的图片：
　　在IE中，段落P，图片img同时实现了居中对齐，也就是说text-align:同时作用于元素p与元素img。　　在FF中，段落P，没有能实现居中对齐，而图片img实现了居中对齐，也就是说text-align:作用于img标签，而段落p标签没有起到居中的作用。　　我们设置段落 p {margin:0}。得到下面的图片：
　　我们发现在IE与FF中，段落P均实现了居中对齐。图片img由于不是作用对象，所以不会居中对齐。　　有三种情况需要说明：　　一、有朋友在操作的时候，将margin:0的选择器混淆了，应该是作用对象，如div，p，而不是body。假如设置：body { margin:0 }将不会达到任何效果，除非你定义body的宽度，那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置，我们最大化窗口将会看到段落并非处于窗口的最左上角。　　二，我们设置段落 p {text-align:} 将要实现的并不是段落本身的对齐方式，而是段落内元素居中对齐。　　三，我们设置图片标签img {margin:0} ，我们就犯了一个小错误，img类于内联对象，不可以设置图片img标签的margin属性，假如你一定想要设置，那么首先要将它的属性转变为块元素，如下面的代码：img {display: margin:0}　　有朋友产生疑问了，那该如何使用呢？说说我的建议：　　假如页面中的元素，均位于div标签或其它块元素内，进行了合理的嵌套，我们不必设置body{text-align:center}。只需要设置相应的div元素margin:0即可。如上面的代码所讲述，页面中的元素均位于段落p标签中，只需要将段落居中即可。　　假如页面中的元素，有一部分不是在div标签或其它块元素内，我们需要设置body{text-align:center}。但也会碰到问题，这样设置以后，大部分内联元素，都居中对齐了，包括页面中其它的一些文本，还需要进行相应的调整才能适应设计的需要。如：我们设置body内有一个段落P，在段落内有一个图片img及一段文本，在body内还存在一个独立的图片img，看下面的图片：
　　我们实现了段落p的居中，同时也让位于段落外的图片实现了居中，但段落中的图片与文本居中对齐了。如下是运行代码：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &/jc/uploads/allimg/0.jpg& _fcksavedurl=&/uploads/divcss/logo3.gif& alt=& - CSS Web Design& width=&200& height=&90& style=&vertical-align:& /&
是一个专业的CSS学习站点，内容丰富并且保持天天更新，我们建立了很多QQ群供网友们互动讨论学习，是学习开发符合WEB标准的网页及网站重构的首选站点。
&img src=&/uploads/divcss/logo3.gif& _fcksavedurl=&/uploads/divcss/logo3.gif& alt=& - CSS Web Design& width=&200& height=&90& style=&vertical-align:& /&
网站制作在线视频教程&&网站制作视频教程打包下载DIV+CSS模板&&CSS视频教程&&CSS设计彻底研究视频教程&&网页制作基础教程&&网站重构&web标准设计教程&&div css视频教程DIV + CSS 入门视频教程，只用记事本编写代码演示&&精通CSS+DIV网页样式与布局配套视频教程&&别具光芒：DIV+CSS网页布局与美化&&DIV.CSS应用视频教程(DIV+CSS)
敬告：文章来源于网络 仅供个人学习和参考 版权归属作者所有 禁止商业用途转载！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
最新css教程
最热css教程
css教程推荐关于用margin:0 auto 居中问题(用HTML5的DOCTYPE)
看到好多网页居中用margin:0 auto而不是margin-left:margin-right:auto，而我自己编写只有火狐和chrome能居中,IE不行。为什么?( PS：Html文件头部是
!DOCTYPE html
)&br&&br&代码：&br&HTML:&br&&br&& ! DOCTYPE html &&br&& html lang=&zh-CN&
&&br&& head &&br&& meta http-equiv=&Content-Type& content=&text/ charset=utf-8&
&&br&& title & dou & /title &&br&& link rel=&stylesheet& type=&text/css& href=&style.css& &&br&& /head &&br&& body &&br&& div class=&anony-nav& &&br&
& div class=&hd-wrap& &&br&
& div class=&hd& &&br&
& div class=&logo& & LOGO & /div &&br&
& div class=&top-nav-items& & ABC & /div &&br&
& /div &&br&
& /div &&br&& /div &&br&& /body &&br&& /html &&br&&br&CSS:&br&&br&html,div{&br&
display:&br&}&br&body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button,&br&textarea, blockquote {&br&margin: 0;&br&padding: 0;&br&}&br&.anony-nav .hd{&br&
clear:width:950margin:0&br&}&br&.anony-nav .hd{&br&
height:74&br&}&br&.anony-nav .logo{&br& float:margin-top:23&br&}
看到好多网页居中用margin:0 auto而不是margin-left:margin-right:auto，而我自己编写只有火狐和chrome能居中,IE不行。为什么?( PS：Html文件头部是
!DOCTYPE html
)代码：HTML:& ! DOCTYPE html && html lang="zh-CN"
&& head && meta http-equiv="Content-Type" content="text/ charset=utf-8"
&& title & dou & /title && link rel="stylesheet" type="text/css" href="style.css" && /head && body && div class="anony-nav" &
& div class="hd-wrap" &
& div class="hd" &
& div class="logo" & LOGO & /div &
& div class="top-nav-items" & ABC & /div &
& /div &…
去掉!和DOCTYPE 间的空格
首先，按@zhangshengchun，去掉!和DOCTYPE 间的空格。其次，去除每个html标签, ‘&’之后的空格，‘&’之前的空格。在IE8/7下可以居中，IE6未测试。
除了楼主说的margin:0 auto外~能使用标签居中的css条件还有两个：它是个块元素、他有固定宽度~width:50display: 这样~楼主的css有遗漏吗------------------add：看到码了~有过类似困惑~祝顺利~^^========感谢@杜潇 的指正，已修订
你那问题应该是模式问题，，我觉得你那有一个空格。只有在怪异模式下ie需要在 body中加入一个text-align:
margin:后面的值 只有一个：上下左右相同；有两个：第一个上下，第二个左右；有三个：第一个上，第二个左右，第三个下；有四个：第一个上，第二个右，第三个下，第四个左；ie要在父div设置 text-align:center
已有帐号？
无法登录？
社交帐号登录无法居中,margin:0属性
作者：佚名
字体：[ ] 来源：互联网 时间：07-27 16:28:17
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0却没有效果，不能居中的问题！margin:0的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题：
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0却没有效果，不能居中的问题！margin:0的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题：
1、没有设置宽度&div style=&margin:0&&&/div&看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！
2、没声明DOCTYPE①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！
②看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的！&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
③你有三种选择，用来声明DOCTYPE* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如&br&，完整代码如下：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &&&
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Frameset//EN& &&&
④至于选择哪种。。使用过度的就可以了。。
说了半天，margin:0不起作用，不能居中的话，看看你的文档最顶端有没有声明DOCTYPE，没有就复制粘贴一下，就可以了！
大家感兴趣的内容
12345678910
最近更新的内容