失效原因：

  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. apache 虚拟主机配置(根据不同的域名映射到不同网站）

    最近弄了台香港服务器做测试,Web服务器软件用的是Apache2.2,机器只有一台,ip只有一个,但是想测试几个站点,于是尝试了下Apache的虚拟主机配置.之前已经写过一篇博文了——<Apac ...

  2. spring boot 启动慢的原因

    停留在Spring logo那里差不多4分钟 SpringBoot启动慢的原因应该是某些应用占用了spring config server默认的端口8888,然后SpringCloud进程有些引用了s ...

  3. 简单配置.htaccess就可以实现的10个功能

    http://bbs.itcast.cn/thread-25990-1-1.html?xhw 1. 反盗链那些盗用了你的内容,还不愿意自己存储图片的网站是很常见的.你可以通过以下配置来放置别人盗用你的 ...

  4. PDO PDO_MYSQL MYSQLI MYSQL 的区别

    MYSQL,MYSQLI 这两个扩展本身就是访问MYSQL数据库的驱动 PDO则是一个抽象层接口 向程序员提供可调用的API是由,MYSQL驱动.MYSQLI驱动,以及PDO来提供. PDO_MYSQ ...

  5. Ajax、Comet、Websocket、SSE

    从 http 协议说起 1996年IETF  HTTP工作组发布了HTTP协议的1.0版本 ,到现在普遍使用的版本1.1,HTTP协议经历了17 年的发展.这种分布式.无状态.基于TCP的请求/响应式 ...

  6. SpringMVC对于跨域访问的支持

    原文地址:http://docs.spring.io/spring/docs/5.0.0.RC2/spring-framework-reference/web.html#mvc-introductio ...

  7. 【转】C#学习之用迭代器实现枚举器

    http://www.cnblogs.com/zouzf/archive/2012/02/22/2362954.html 本人初学C#,本文仅供个人整理思路用,那里说得不对,请大家多多指教,万分感激! ...

  8. Z-Score数据标准化处理（python代码）

    #/usr/bin/python def Z_Score(data): lenth = len(data) total = sum(data) ave = float(total)/lenth tem ...

  9. POJ #1025 Department

    模拟题. 这题第一个障碍是现在少见的循环电梯 ('pater-noster' elevator) "The building has `pater-noster' elevator, i.e ...

  10. bzoj 4566 [Haoi2016]找相同字符SA

    4566: [Haoi2016]找相同字符 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 128  Solved: 75[Submit][Status ...