为什么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 为什么没有生效? ...
随机推荐
- 关于财务YT知识点
1 YT 将今年剩余的未花完的money做YT,生成一个YT号,用在下一年使用的机制. 2 生成YT的方式 2.1 PR生成YT 2.2 PO生成YT 2.3 TR生成YT 2.4 预算直接生成YT ...
- hdu 1285 拓扑
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- （十）Activitivi5之启动流程/完成任务的时候设置流程变量
一.启动流程的时候设置流程变量 1.1 案例 /** * 启动流程实例 */ @Test public void start() { Student student=new Student(); st ...
- （一）Struts2 基础
一.Struts简介 1.1 历史 虽然Struts 2号称是一个全新的框架,但这仅仅是相对Struts 1而言.Struts 2与Struts 1相比,确实有很多革命性的改进,但它并不是新发布的新框 ...
- restTemplate源码解析（五）处理ClientHttpResponse响应对象
所有文章 https://www.cnblogs.com/lay2017/p/11740855.html 正文 上一篇文章中,我们执行了ClientHttpRequest与服务端进行交互.并返回了一个 ...
- ElementUi使用表单验证出现验证问题
问题: 使用vue element-ui中的form表单验证出现了输入框或者下拉框中明明有值, 但是却还是提示请输入或请选择,错误如下: <el-form status-icon :ref=&q ...
- vue获取当前路由
完整url可以用 window.location.href路由路径可以用 this.$route.path路由路径参数 this.$route.params 例如:/user/:id → /user/ ...
- 2 webpack 4 加vue搭建开发环境最终配置
1 package.json { "name": "c", "version": "1.0.0", "desc ...
- 【转载】salesforce 零基础开发入门学习（五）异步进程介绍与数据批处理Batchable
salesforce 零基础开发入门学习(五)异步进程介绍与数据批处理Batchable 本篇知识参考:https://developer.salesforce.com/trailhead/for ...
- UITableView个人使用总结【前篇-增量加载】
UITableView现在边整边总结. 预计分两个部分,第一个部分主要是对UITableView本身属性的学习.第二个部分可能会是加上一个编辑按钮以及对列表的操作. 今天先学习第一部分. 第一部分,我 ...
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）