为什么margin:0 auto不能用于inline-block元素
前言：今天一个实习生问我，为什么他对图片使用了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元素的更多相关文章
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）
body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...
- 绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；
声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...
- margin:0 auto 与 text-align:center
1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式; text-align:center 设置文本或img标签等一些内联对象的居中. 2.m ...
- margin:0 auto 与 text-align:center 的区别
基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性.支 ...
- margin:0 auto 与 text-align:center 的区别（转载）
摘自:http://www.cnblogs.com/zhwl/p/3529473.html 基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点 ...
- 图片margin:0 auto;为何不居中
图片margin:0 auto;为何不居中 关键: img元素 display设为block 代码: <!DOCTYPE html> <html> <head> & ...
- margin:0 auto在IE中失效的解决方案
转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
- CSS中margin: 0 auto；样式没有生效
问题:有两个元素: A, B.两则是嵌套关系,A是B的父节点.A和B都是块元素.当在A上设置:margin: 0 auto的时候,B并没有在页面中居中. margin: 0 auto 为什么没有生效? ...
随机推荐
- python实现数字0开始的索引，对应Execl的字母方法
字母转数字方法: import re col = row = [] # 输入正确格式的定位,A2,AA2有效,AAB2无效 while len(col) == 0 or len(row) == 0 o ...
- Linux学习笔记：split切分文件并按规律命名及添加拓展名
基础知识 功能:使用 shell 的 split 可以将一个大文件分割成很多个小文件,有时文件太大处理起来不方便就需要使用到了. 在默认情况下将按照每1000行切割成一个小文件. 语法: split ...
- 什么？在SAP中国研究院里还需要会PHP开发？
请原谅Jerry这篇文章的题目有"标题党"的嫌疑. 没错,至少SAP成都研究院的部分团队如此,比如Jerry目前就职的SAP成都研究院数字创新空间. 之前Jerry的文章, 曾经提 ...
- 6.显示锁Lock 和 线程通信Condition
显示锁 Lock 一.用于解决多线程 安全问题的方式: synchronized: 1.同步代码块 2.同步方法 jdk1.5 后:第三种:同步锁Lock (注意:同步(synchro ...
- MyBatis工厂工具类 MyBatisUtils
import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apach ...
- Manifold learning 流形学习
Machine Learning 虽然名字里带了 Learning 一个词,让人乍一看觉得和 Intelligence 相比不过是换了个说法而已,然而事实上这里的 Learning 的意义要朴素得多. ...
- CentOS 安装hping3工具及安装遇到的错误及解决方法
hping是用于生成和解析TCPIP协议数据包的开源工具.创作者是Salvatore Sanfilippo.目前最新版是hping3,支持使用tcl脚本自动化地调用其API.hping是安全审计.防火 ...
- IDEA部署项目到远程服务器
一.idea安装阿里插件Alibaba Cloud Toolkit 二.添加Host 三.应用部署 四.修改源程序重新部署 五.查看实时日志 欲买桂花同载酒,终不似,少年游
- 线段树lazy模板 luogu3372
线段树写得很少,这么基本的算法还是要会的…… #include<bits/stdc++.h> using namespace std; inline long long read() { ...
- win10开机后将存在多个系统选择，改为直接进入系统无需选择
win10系统安装后,可能出现每次开机都要选择操作系统,比较麻烦,所以就来设置下如何直接进入系统,无须选择 1.我的电脑右键“属性”—“高级系统设置”—“系统属性” 2.设置“启动和故障恢复”如下 选 ...
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）