前言：今天一个实习生问我，为什么他对图片使用了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. Itellij IDEA下Maven的配置

      maven基本配置 配置阿里云镜像 打开settings.xml,添加 <mirrors> <mirror> <id>alimaven</id> < ...

    2. Oracle数据库导出txt格式工具sqlload2使用

      开发需求:需要在数据库中查询数据,最终得到cxv表格形式数据. 使用plsql导出70M数据量非常慢,本次使用sqlload2工具,导出文本txt文本格式. 1)导出txt文本文件$ ./sqluld ...

    3. [Vue]导航守卫：全局的、单个路由独享的、组件级的

      正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

    4. SIFT算法研究

      原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://underthehood.blog.51cto.com/2531780/65835 ...

    5. 【原创】大叔经验分享（87）marathon重启应用过程服务不可用

      marathon提供多种健康检查方式 常用的有TCP和HTTP, TCP检查端口是否存在,存在则认为实例健康: HTTP检查指定URL的HTTP返回码,返回码正常(2xx.3xx)则认为实例健康: 这 ...

    6. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

      07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

    7. 恺撒密码 B

      恺撒密码 B ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‭ ...

    8. jQuery入门简述

      jQuery 是一套快速的,简洁的 javaScript 脚本库,jQuery 由美国人 John Resig 创建,至今已吸引了来自世界各地的众多 javaScript 高手加入其组织,使用户能更方 ...

    9. 使用Lua编写Wireshark插件解析KCP UDP包，解析视频RTP包

      前段时间写了一个局域网音视频通话的程序,使用开源 KCP 来实现可靠UDP传输. 通过研究发现KCP在发包时,会在数据包前面加上它自己的头.如果数据包较小,KCP可能会把多个数据包合成一个包发送,提高 ...

    10. 一：项目简介（node express vue elementui axios）

      一:项目基本构造 ** 项目一共有 16 个页面,是一个电商网销项目,自己在网上的某网上找的一个要做的网站的设计图: 页面主要包括:  登录页 -- 注册页 -- 首页 -- 产品列表页 -- 产品详 ...