失效原因：

  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. JS页面快捷键库hotkeys.js

    网友提供了一个好用的快捷键库,没有任何依赖,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb). 这里也要特别感谢园友kacper的提醒与提供 ...

  2. 智能DNS解析之edns-client-subnet篇

    摘要:智能DNS解析是CDN的重要组成部份,所谓的智能也就是根据请求用户来对同一域名作出相应不同解析(目前大多数域名注册商还没提供线路解析的服务),所以CDN的调度准确性也就完全依靠DNS智能解析,但 ...

  3. P2564 生日礼物

    生日礼物 洛谷链接 题目描述: 在一段彩带上有不同颜色的彩珠,求出包含所有颜色彩珠的最短彩带长度. 思路: 我们可以把按彩珠的位置把所有彩珠排一下序,然后从1开始遍历这些彩珠,并记录出现过的颜色数目, ...

  4. 使用sami生成文档

    从composer安装sami $ composer require sami/sami composer自动配置完以后,可以先测试一下是否安装成功.只要不带参数的运行一下sami,就会知道结果. $ ...

  5. Struts2的文件上传与下载

    <一>简述: Struts2的文件上传其实也是通过拦截器来实现的,只是该拦截器定义为默认拦截器了,所以不用自己去手工配置,<interceptor name="fileUp ...

  6. 【bzoj4816】[Sdoi2017]数字表格 莫比乌斯反演

    题目描述 Doris刚刚学习了fibonacci数列.用f[i]表示数列的第i项,那么 f[0]=0 f[1]=1 f[n]=f[n-1]+f[n-2],n>=2 Doris用老师的超级计算机生 ...

  7. HDU-1528/1962 Card Game Cheater

    两组牌中两张牌相比能赢的就连,后求最大匹配. #include <cmath> #include <cstdlib> #include <cstdio> #incl ...

  8. 刷题总结——Tree chain problem（HDU 5293 树形dp+dfs序+树状数组）

    题目: Problem Description Coco has a tree, whose vertices are conveniently labeled by 1,2,…,n.There ar ...

  9. [USACO Section 3.2] 01串 Stringsobits (动态规划)

    题目链接 Solution 贼有意思的 DP, 也可以用组合数学做. \(f[i][j]\) 代表前 \(i\) 位,有 \(j\) 个 \(1\) 的方案数. 转移方程很简单 : \(f[i][j] ...

  10. JS当中利用&&和||简化代码

    ; ){ add_level = ; } ){ add_level = ; } ){ add_level = ; } ){ add_level = ; } else { add_level = ; } ...