失效原因：

  1. 要给居中的元素一个宽度，否则无效。
  2. 该元素一定不能浮动或绝对定位，否则无效。
  3. 在HTML中使用<center></center>标签，需考虑好整体构架，否者全部元素都会居中的。
  4. 有时需要给父级元素添加text-align: center;
  5. 有时可能涉及到 <!DOCTYPE>类型相关定义。

当元素 float 后元素身上发生了什么：

  1. 脱离当前的文档流，变换到容器的边缘，或是另一个浮动box的边缘，若空间不够则向下移动直到可以放下（margin的值是auto或不指定在渲染时会被当做0处理）
  2. 文档流中的line box, inline box将围绕float box
  3. float box若不设宽度将是它实际内容的宽度
  4. 把box都变成block-level box，形成一个新的block formatting context
  5. top/left/right/bottom, z-index无效

滥用float会导致各种bug，诸如：Incorrect Float Shrink-Wrap Bug、Float Squeeze Weird Gap Bug、Float Squeeze Duplicate Last Character Bug、Image Float Bullet Chaos Bug、Staircase Bug、Double Margin Bug、Italics Float Bug、3px Jog Bug、Scared of Floats Bug、Escaping Floats Bug、IE6 Peekaboo Bug……等等。所以在实际使用中有个原则，尽量不同时用2个或以上的float（比如可以用inline-block替代float）

转自 http://blog.csdn.net/Dong_PT/article/details/51239526

margin: 0 auto; 元素水平居中布局无效的更多相关文章

  1. CSS中设置margin:0 auto; 水平居中无效的原因分析

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...

  2. css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  3. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  4. 为什么margin:0 auto不能用于inline-block元素

    前言:今天一个实习生问我,为什么他对图片使用了margin:0 auto,但图片却没有居中,我让他换成对父元素使用text-align:center即可.为什么margin:0 auto对图片不起作用 ...

  5. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  6. 绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  7. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  8. margin:0 auto 与 text-align:center

    1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;            text-align:center 设置文本或img标签等一些内联对象的居中. 2.m ...

  9. margin:0 auto 与 text-align:center 的区别

    基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;   该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;  一般情况下设置文本对齐方式的时使用此属性.支 ...

随机推荐

  1. 利用委托实现自己的数据缓存仓库（附上Demo）

    Demo源码 写在前面的话 写完这篇博客后,总觉得少了些什么,后来想了下,感觉自己只是把结果给亮了出来,自己为什么想到这么做,这个类库出生的缘由未详述,因此,在本段作下说明,如有不足之处,希望能和大家 ...

  2. Python-函数参数的传递

    作者:Vamei 出处:http://www.cnblogs.com/vamei,感谢博主的分享, python的函数参数传递有这样的几种形式: 1.位置传递 2.关键字传递 3.参数默认值传递 4. ...

  3. API生命周期第三阶段：API实施：使用swagger codegen生成可部署工程，择取一个作为mock service

    在分享培训了swagger对于API的设计之后,有一些人问我说:你看,现在咱们前端使用web_API做为mock data在进行测试,后端也有mock 测试.然后我们再进行联调,这之中肯定会出现一些偏 ...

  4. asp.net的Context.Cache缓存过期策略

    最近使用Context.Cache需要了解Cache的缓存过期策略. 文章:ASP.NET缓存中Cache过期的三种策略

  5. DS作业06-图

    1.本周学习总结(0--2分) 1.1思维导图 1.2谈谈你对图结构的认识及学习体会. 图这一章的学习,是经过树学习后,难得一章重新寻找到感觉的学习.因为这一章比较少用递归,使用的是结构体,很多东西我 ...

  6. kb-01-a<简单搜索--dfs八皇后问题变种>

    题目描述: 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的 ...

  7. SPOJ 3267 D-query（离散化+在线主席树 | 离线树状数组）

    DQUERY - D-query #sorting #tree English Vietnamese Given a sequence of n numbers a1, a2, ..., an and ...

  8. 搜索引擎快捷导航：一个简单的chrome插件（教程）

    一.如何通过练习来提高学习新框架的最好姿势是:基于现有的业务来学习.即从工作中学习,从实践中学.但是,如果一直只使用新的框架来重写旧的业务,成长也会趋近于0.第一次,使用新框架时收获可能颇丰:第二次, ...

  9. BZOJ1064 [Noi2008]假面舞会 【dfs】

    题目 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方会把此编号告诉拿 ...

  10. POJ3071 Football 【概率dp】

    题目 Consider a single-elimination football tournament involving 2n teams, denoted 1, 2, -, 2n. In eac ...