前言：今天一个实习生问我，为什么他对图片使用了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. MH-P虚拟机DSR中安装SQL2008

      双击下载好的安装文件setup.exe.(注意:安装之前请确认是否有安装SQL Server 2008 R2需要的.NET Framework 3.5 SP1,我的环境由于之前有配置安装过,在这里不具 ...

    2. (二) JPA基础

      一.什么是JAP JPA(Java Persistence API)是SUN官方推出的Java持久化规范,它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据.它的出现主要是 ...

    3. Swagger 实践 <一>

      参考 :https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/getting-started-with-nswag?view=aspnetcor ...

    4. java 文件上传 下载 总结

      首先引入2个jar ![](http://images2017.cnblogs.com/blog/1128666/201711/1128666-20171101145630498-2084371020 ...

    5. linux安装tmux分屏插件

      linuxtmux分屏 一.安装tmux 二.基本使用 三.鼠标操作 一.安装tmux yum install -y tmux TMUX2版本以下 二.基本使用 使用tmux一般使用命令和快捷键来操作 ...

    6. C++ 项目和资源导引

      值得学习的C语言开源项目 注意:本文转载自:https://blog.csdn.net/a110658684/article/details/78862348 - 1. Webbench Webben ...

    7. leetcode-8.atoi · string *

      题面 原题挺长的,还是英文,就不抄了,

    8. 6.显示锁Lock 和 线程通信Condition

      显示锁 Lock 一.用于解决多线程 安全问题的方式: synchronized:   1.同步代码块      2.同步方法 jdk1.5 后:第三种:同步锁Lock  (注意:同步(synchro ...

    9. Forms Process (FRMWEB) Consumes 100% of CPU in Oracle Applications R12 (文档 ID 745711.1)

      https://support.oracle.com/epmos/faces/DocumentDisplay?_afrLoop=283767243216583&id=745711.1& ...

    10. go语言的duck typing

      对于一个接口来讲有:实现者和使用者. 传统的面向对象都是实现者实现接口,然后告诉大家接口规范(传餐和返回):而golang比较特别,是使用者们去分别实现符合自己需求的各自的接口方法的.而C++是实现者 ...