前言：今天一个实习生问我，为什么他对图片使用了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. centos7搭建EFK日志分析系统

      前言 EFK可能都不熟悉,实际上EFK是大名鼎鼎的日志系统ELK的一个变种 在没有分布式日志的时候,每次出问题了需要查询日志的时候,需要登录到Linux服务器,使用命令cat -n xxxx|grep ...

    2. IntelliJ IDEA 之 配置JDK 的 4种方式

      一.新建项目前配置JDK 打开IDEA集成开发环境工具,点击:File--Project Structure,如下图 在打开的页面中,选择SDKs属性,并点击中间的加号+,选择JDK,如下图 在打开的 ...

    3. Java数据结构Vetor

      Java数据结构Vector /** * <html> * <body> * <P> Copyright JasonInternational</p> ...

    4. Kong命令（二）service

      service介绍: service 是声明了一组name.host.port.protocol等配置的函数.可以绑定route.upstream上下游服务.并且对于route.upstream可以绑 ...

    5. 微信支付之二维码支付(native)

      HoJe男孩子你要加油阿 准备材料微信支付需要的参数统一下单二维码回调接口用到的工具类 . 准备材料 首先肯定是要有微信的开发文档开发文档地址再然后就是一些必的参数 注意:回调地址异步接收微信支付结果 ...

    6. 关闭google默认打开翻译提醒

      关闭google默认打开翻译提醒 在header中添加以下代码: <meta name="google" content="notranslate" /& ...

    7. html 输入框ios苹果手机显示九宫格数字键盘

      只需要在input标签加上type=‘tel’  即可

    8. 从linux和ucos的比较中来看进程这个概念

      这种问题就要和ucos结合起来嘛. 程序和进程: 程序:存放在磁盘上的一些列代码和数据的可执行映像,是一个静止的实体. 进程:是一个执行中的程序,它是动态的实体. linux进程的四要素: 1. 有一 ...

    9. flask的多个url对应同一个视图函数

      # -*- coding: utf-8 -*- from flask import Flask app = Flask(__name__) @app.route('/') def index(): r ...

    10. 使用jquery来完成AJAX操作

      jQuery对Ajax操作进行了封装,在jQuery中最底层的方法是$.ajax(),第二个是load(),$.get()和$.post(),第三层是$.getscript()和$.getJSON() ...