图片margin:0 auto;为何不居中

关键:

　　img元素 display设为block

代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

</head>

<style type="text/css">

</style>

<body>

    <span id="">

        因为此时图片是inline水平,就算没有width,其也不会占据整个容器.

    </span>

    <img src="../卡拉卡拉.jpg" style="display:block;width:200px;margin: 0 auto;"/>

    <span id="" class="">

        因为此时图片是block水平,就算没有width,也会占据整个容器(不能一行显示)

    </span>

</body>

<script type="text/javascript" charset="utf-8">

</script>

</html>

效果:

图片margin:0 auto;为何不居中的更多相关文章

  1. IE下margin:0 auto为什么不居中？

    http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...

  2. margin:0 auto为何会居中?

    margin: 0 auto;为何会居中呢??? 一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中 但是后来就很好奇 margin: auto 0;为何不能垂直居中? ...

  3. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  4. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  5. margin:0 auto;不居中

    margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...

  6. 在ie浏览器，360浏览器下，margin：0 auto；不居中的原因

    转自 http://blog.sina.com.cn/s/blog_6eef6bf60100nn4m.html margin:0 auto:不居中可能有以下两个的原因 没有设置宽度 看看上面的代码,根 ...

  7. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

  8. 绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  9. IE8 margin:0 auto 不能居中显示的问题

    ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...

随机推荐

  1. 剑指offer(1)

    题目: 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...

  2. 通过view实现rest api接口

    Django rest framwork之view 基于Django的View实现Json数据的返回: # _*_ encoding:utf-8 _*_ __author__ = 'LYQ' __da ...

  3. echo "" > 和 echo "" >> 的区别

    在写shell脚本中,如果判断一个文件已经存在,但希望重写这个文件,一般用如下方式 echo "" > file.txt 这个表示清空文件的内容,如果使用 echo “” & ...

  4. 【python练习题】程序10

    #10.题目:暂停一秒输出,并格式化当前时间. import time print(time.time())#timestamp print(time.localtime(time.time()))# ...

  5. 微服务 Micro services

    微服务 (Microservices) 是一种软件架构风格,它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础,利用模组化的方式组合出复杂的大型应用程序, ...

  6. 从身份证号码中获取性别、出生日期、籍贯，并更新mongodb

    有这样的需求,人员信息是存在mongodb中,需要存放人员的身份证.性别.出生日期.籍贯等信息.通过脚本导入这些信息,但是只导入了身份证号码,其他信息空缺.现在需要补全其他信息. 其实身份证信息就包含 ...

  7. linux查找符合条件的文件并删除

    找到根目录下所有的以test开头的文件并把查找结果当做参数传给rm -rf命令进行删除: 1.find / -name “test*” |xargs rm -rf 2.find / -name “te ...

  8. VM磁盘映射共享方法，要求文件系统必须一致

    如果主机是window系统,那么虚拟机也应该是Windows系统,不然不起作用

  9. Pearls POJ - 1260 dp

    题意:有n种不同的珍珠 每种珍珠的价格不同  现在给出一个采购单 标注了需要不同等级的珍珠和相对于的个数(输入按价格升序排列) 其中 价格为   (当前种类价格+10)*购买数量  这样就有一种诡异的 ...

  10. 洛谷P2320鬼谷子的钱袋.

    题目 这个题考察二进制分解. \(Code\) #include <bits/stdc++.h> #pragma GCC optimize(2) #pragma GCC optimize( ...