为什么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 为什么没有生效? ...
随机推荐
- 正则表达式的运行原理详解（NFA，多分支原理）
原文:https://blog.csdn.net/yx0628/article/details/82722166
- 开发人员需求能kill杀死其它阻塞自己的会话，测试发现需要alter system权限有风险
模拟开发人员需求,可以杀死其它阻塞自己的会话1.能有查询阻塞会话确认的权限SQL> grant select on v_$session to testa;SQL> grant selec ...
- Opencl 学习笔记
1. HelloWorld
- Apache Flink 任意jar包上传漏洞
目前受影响版本:version 1.9.1(最新),官方未发布补丁. Apache Flink仪表板- >上传恶意的JAR- >提交新工作- >getshell 生成jar包,用nc ...
- TypeScript入门八：TypeScript的命名空间
初识命名空间(namespace指令) 命名空间与文件拆分 多重命名空间与三斜杠指令引入依赖文件 一.初识命名空间(namespace指令) TypeScript的命名空间可以说就是ES6的模块化,其 ...
- uni-app入门学习
什么是 uni-app 1 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 官方的体验例子: 2 un ...
- gitlab中的几个常用界面（runner管理、gitlab-ci.yml管理、runner token管理、新建用户、拉用户入工程、拉用户入组、复制工程导入组）
目录: 1.runner管理 2.gitlab-ci.yml管理 3.runner token管理 4.新建用户 5.拉用户入工程 6.拉用户入组 7.复制工程导入组 1.runners界面 http ...
- 面试想拿20K,HR说你只值10K,这个时候你该怎样回答或者反驳
正确的做法是: 不动声色,继续跟HR谈下去.把面试流程走完,并且争取拿到这个10K的offer. 这里有一个小技巧: 如果拿到offer,礼貌地跟HR表示感谢,不过不要马上入职.可以找个由头,比方说自 ...
- tornado 常见问题处理
1 怎么获取从页面中的传值 使用 self.get_body_argument tornado的参数存储在self.request.body内,通过json以后就可以直接取值,当初我在前端使用angu ...
- nginx搭建反向代理服务器详解
一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）