失效原因：

  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. 轻量级的C++插件框架 - X3 C++ PluginFramework

    X3 C++ PluginFramework 代号为X3的C++轻量级通用插件框架平台是一套通用的C++轻量级插件体系,没有使用MFC.ATL.COM.可在Windows和Linux下编译运行.应用程 ...

  2. [python xml 学习篇][0]

    tree = ET.parse("Result.xml")root = tree.getroot()print type(root)print root.tag # 得到root ...

  3. ICPC南京补题

    由于缺的题目比较多,竟然高达3题,所以再写一篇补题的博客 Lpl and Energy-saving Lamps During tea-drinking, princess, amongst othe ...

  4. HDU-1529 Cashier Employment

    据网上说这是到差分约束四星题... 可我觉得难吗? 比推DP方程容易... 两种约束方式,当然实现到程序就变成六种了... #include <cstdio> #include <c ...

  5. Master&Slave是什么？

    由于前段时间公司项目比较赶,一直抽不出时间写博客,今天偷空写一篇吧.前面给大家讲解了单机版redis的基本操作,现在继续给大家讲解一下Redis的进阶部分,主从复制和读写分离. 一.Master&am ...

  6. 第一次使用HTML

    1.第一次使用HTML <title>第一次使用HTML</title></head><body>hello,HTML2.文本处理 <title& ...

  7. bzoj 2801 [Poi2012]Minimalist Security 设一个，求出所有

    题目大意 给出一个N个顶点.M条边的无向图,边(u,v)有权值w(u,v),顶点i也有权值p(i), 并且对于每条边(u,v)都满足p(u)+p(v)>=w(u,v). 现在要将顶点i的权值减去 ...

  8. 清澄 A1485. Catch The Penguins 抓企鹅

    试题来源 2013中国国家集训队论文答辩 问题描述 Xyz带着他的教徒们乘着科考船一路破冰来到了南极大陆,发现这里有许许多多的企鹅.邪恶的Xyz想要抓很多企鹅回去开动物园,当宠物玩.但动物保护协会很快 ...

  9. javap的基本用法

    参考:http://www.cnblogs.com/beautiful-code/p/6424977.html javap是JDK自带的反汇编器,可以查看java编译器为我们生成的字节码.通过它,我们 ...

  10. cpu乱序执行

    http://blog.163.com/zhaojie_ding/blog/static/1729728952007925111324379/?suggestedreading 处理器的乱序和并发执行 ...