前言：今天一个实习生问我，为什么他对图片使用了margin:0 auto，但图片却没有居中，我让他换成对父元素使用text-align:center即可。为什么margin:0 auto对图片不起作用，这是以前入门的时候看《css权威指南》知道的，后来一直这么用，突然有点忘记为什么了。于是又去翻了下书，这里分享下自己的理解。

块级元素的水平属性

块级元素在水平方向上有7大属性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。

  • 这7大属性的值加起来必须是元素包含块的宽度（这一点记住，一会要考

    为什么margin:0 auto不能用于inline-block元素的更多相关文章

    1. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）

      body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

    2. 绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

      声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

    3. margin:0 auto 与 text-align:center

      1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;            text-align:center 设置文本或img标签等一些内联对象的居中. 2.m ...

    4. margin:0 auto 与 text-align:center 的区别

      基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;   该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;  一般情况下设置文本对齐方式的时使用此属性.支 ...

    5. margin:0 auto 与 text-align:center 的区别（转载）

      摘自:http://www.cnblogs.com/zhwl/p/3529473.html 基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;   该属性通过指定行框与哪个点 ...

    6. 图片margin:0 auto;为何不居中

      图片margin:0 auto;为何不居中 关键: img元素 display设为block 代码: <!DOCTYPE html> <html> <head> & ...

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

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

    8. css中margin:0 auto没作用

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

    9. CSS中margin: 0 auto；样式没有生效

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

    随机推荐

    1. go hello world第一个程序

      main 函数所在的包名必须使用main import "fmt"  导入包fmt  fmt包包含了Println方法的定义 func main() 程序运行入口方法和c语言相似 ...

    2. 待续：s5p6818移植 uboot 2014.07 移植

      前言: 之前半年一直在嵌入式Linux移植中挣扎,不知道该从哪个方面开始入手,也失败了很多次,苦思了很久最终决定先从uboot开始. uboot版本的不同会导致添加板子的时候的配置方法会不一样.由于手 ...

    3. [Tensorflow]激励函数tf.nn.relu样例

      代码: import tensorflow as tf import numpy as np ### 定义添加神经网络层函数 START ### def add_layer(inputs,in_siz ...

    4. 数据结构——java实现队列

      顺序队列: 概念: 队列是一种先进先出的线性表,只允许在一端插入,另一端删除.允许插入的一端称为队尾,允许删除的一端称为队头 顺序队列的实现: import org.junit.jupiter.api ...

    5. Ubuntu 14.04 64位机上不带CUDA支持的Caffe

      Caffe是一个高效的深度学习框架.它既可以在CPU上执行也可以在GPU上执行. 下面介绍在Ubuntu上不带CUDA的Caffe配置编译过程: 1.      安装BLAS:$ sudo apt-g ...

    6. SIP协议参数详解

      1.1  SIP消息分类 SIP协议是以层协议的形式组成的,就是说它的行为是以一套相对独立的处理阶段来描述的,每个阶段之间的关系不是很密切. SIP协议将Server和User Agent之间的通讯的 ...

    7. sqlyog 如何导出建表语句

      真傻了,这个问题弄了半天. 解决 点击表名后,在右侧的信息栏里面有啊: PS - 个人博客链接:sqlyog 如何导出建表语句

    8. sql根据一个表查询的数据作为条件查询另一个表

      代码格式如下: ) 要注意的是:in后面的查询语句必须是查询一个字段跟前面的表相对应的.比如要根据订单号orderID,OpenBills 这个表就需要查询到orderID这个字段,BillConsu ...

    9. 【Zookerper】 安装开启

      一.Windows环境 1.1 下载和安装: 1.2 开启 1.3 关闭 1.4 用客户端连接 二.Linux 环境 一.Windows环境 1.1 下载和安装: 环境要求:必须要有jdk环境 1.安 ...

    10. 使用fiddler进行接口测试

      我们来说说如何使用fiddler做接口测试? 测试准备,抓到相应的接口和入参或者找接口文档,我这里就用聚合数据里面的接口做样例, 接口如下: 测试接口:http://japi.juhe.cn/qqev ...