问题:有两个元素: 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. /proc/sys/net/ipv4/下各参数含义

    net.ipv4.tcp_tw_reuse = 0 表示开启重用.允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭 net.ipv4.tcp_tw_recycle = ...

  2. OpenStack Weekly Rank 2015.08.03

    Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 7 1 1 7 11 Sw ...

  3. LeetCode 441.排列硬币(C++)

    你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整型的范围内. 示例 ...

  4. 《Flink 源码解析》—— 源码编译运行

    更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...

  5. Unicode汉字编码表以及参考源码分享

    1 Unicode编码表  Unicode只有一个字符集,中.日.韩的三种文字占用了Unicode中0x3000到0x9FFF的部分  Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个 ...

  6. C语言答案解析

    1.设整型变量 a=2,则执行下列语句后,浮点型变量b的值不为0.5的是(  B ) A) b=1.0/a            B) b=(float)(1/a) C) b=1/(float)a   ...

  7. 基于Python3 神经网络的实现

    基于Python3 神经网络的实现(下载源码) 本次学习是Denny Britz(作者)的Python2神经网络项目修改为基于Python3实现的神经网络(本篇博文代码完整).重在理解原理和实现方法, ...

  8. Oracle数据导入导出imp/exp命令 10g以上expdp/impdp命令

    Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到远处的数据库服务器中. 利 ...

  9. Movideo SaaS解决方案

    类型: 定制服务 软件包: media solution collateral 联系服务商 产品详情 解决方案 概要 Movideo为媒体客户提供的SaaS解决方案部署在位于全球数据中心的Azure云 ...

  10. check_mk 之 Check Parameters

    配置检测参数有几下方法 1. Creating manual checks instead of inventorized checks (using the variable checks). 2. ...