问题:有两个元素: A, B。两则是嵌套关系,A是B的父节点。A和B都是块元素。当在A上设置:margin: 0 auto的时候,B并没有在页面中居中。

margin: 0 auto 为什么没有生效?

解决:margin:0 auto;生效,需要一定的前提条件。

1 两者是块元素,即 display: block;

2 父元素需要有宽度,即 width: x px;

3 在有前两者的前提下,设置 margin: 0 auto;即可实现居中。

小结:问题出现的原因是,没有给A元素设置宽度。给A元素加上宽度后,B元素就可以居中了。

CSS中margin: 0 auto;样式没有生效的更多相关文章

  1. css中margin:0 auto没作用

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

  2. CSS中margin:auto什么意思?margin:auto属性的用法详解

    我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...

  3. 网页CSS中*{margin:0; padding:0;}有什么用

    * 这东西叫“通配符”用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或p ...

  4. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

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

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

  6. css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?

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

  7. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  8. margin:0 auto在IE中失效的解决方案

    转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...

  9. margin:0 auto;生效条件

    1.position:absolute下不生效 原因:position:absolute只能相对于父元素进行定位top.left定位,相当于浮在父元素上面,所以margin:0 auto;就没有了参考 ...

随机推荐

  1. RedHat6.5安装MySQL5.7

    安装环境:RedHat6.5  第一步:下载 下载MySQL5.7:http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.12-1.el6.x8 ...

  2. 本地git的使用

    git和svn的解析 git 教程 git rebase的用法 attion: one:  git中是严格区分大小写的,文件名字大小写敏感 two:  git中分为:工作区,暂存区,分支 three: ...

  3. inventor安装失败怎样卸载安装inventor 2016?

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  4. ubuntu14.04.2安装 YouCompleteme

    1 安装git ,按照这篇文章安装 http://www.cnblogs.com/or2-/p/4350252.html 2 安装编译需要的各种包 sudo apt-get install build ...

  5. Day5下

    T1 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> ...

  6. 批量删除QQ空间说说

    第一步:用电脑打开浏览器登录你的QQ空间 第二步:点击你的说说栏目 第三步:按下电脑的F12键或者点击右上角的菜单一栏,点击开发者工具 第四步:看到右半边屏幕,找到一个叫Console的菜单,并且点击 ...

  7. 《Google软件测试之道》之学习笔记01

    Google软件测试介绍 软件测试团队->工程生产力(Engineering Productivity) http://googletesting.blogspot.com/2011/01/ho ...

  8. 3.HTML DOM

    介绍 DOM(Document Object Model)文档对象模型,定义了访问 HTML 和 XML 文档的标准,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. 那显然,HTML DOM ...

  9. 解决 Maven 项目中找不到 jdk 的 tools.jar 文件的办法(多数情况下适用)

    <dependency> <groupId>jdk.tools</groupId> <artifactId>jdk.tools</artifact ...

  10. Mvc过滤器的使用【转载】

    前言 在开发大项目的时候总会有相关的AOP面向切面编程的组件,而MVC(特指:Asp.Net MVC,以下皆同)项目中不想让MVC开发人员去关心和写类似身份验证,日志,异常,行为截取等这部分重复的代码 ...