前言：今天一个实习生问我，为什么他对图片使用了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. golang以服务方式运行

      golang开发的二进制程序,一般需要长期后台运行的,在linux上可以用supervisor或upstart或systemd等第三方守护进程来实现.其实golang自己也可以实现以服务的形式常驻后台 ...

    2. post请求 大坑 注意点

      如果后台接收的是一个list 前台请求的时候 PLdelete() { //批量删除流量计 console.log(this.multipleSelection instanceof Array,9) ...

    3. php底层变量存储

      变量存储 php的变量使用一个结构体 zval来保存的,在Zend/zend.h中我们可以看到zval的定义 struct _zval_struct { /* Variable information ...

    4. （十三）使用handler实现登录验证

      一.Handel概念 J2EE Web 服务中的Handler技术特点非常像Servlet技术中的Filter.我们知道,在Servlet中,当一个HTTP到达服务端时,往往要经过多个Filter对请 ...

    5. 基于Docker的Kafka部署

      一 准备 1.1 安装docker-dompose #部署 sudo curl -L "https://github.com/docker/compose/releases/download ...

    6. 十三、Vue中的computed属性

      以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...

    7. python处理RSTP视频流

      python链接海康摄像头,并以弹出框的方式播放实时视频流, 这种方式是以弹出框的形式播放.本地测试可以,实际业务场景不建议使用.可以采用rtsp转rtmp的方式 @shared_task def p ...

    8. datatables初始化用法

      var recordTable = $('#record_table').DataTable({ "fnInitComplete": function () { //表格初始化完成 ...

    9. 初学VUE 走马灯效果

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

    10. vscode-golang跳转定义无效问题

      问题发现: 本来可以进行"ctrl"+点击或者F12,进行跳转定义的方式,突然失效了 问题分析: 1.辅助工具是否关闭 解决方案,进入首选项,设置,查找go.docsTool,选项 ...