图片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. Linux 下面RPM 安装的SQLSERVER 修改字符集的方法

    1. 自己还是太low 2. 遇到问题 先 -h 处理 3. 发现登录报错, 怀疑是字符集的问题: 4. 计划是修改字符集 到 自己的环境可用的状态 使用命令 /opt/mssql/bin/mssql ...

  2. 将表单数据转换为json代码分享

    <body> <form action="#" method="post" id="form1"> <inpu ...

  3. 【学亮IT手记】PL/SQL游标编程

    游标提供了一种从表中检索数据并进行操作的灵活手段,主要用在服务器上,处理由客户端发送给服务器端的sql语句,或者是批处理.存储过程.触发器中的数据处理请求. 显式游标 是由用户声明和操作的一种游标,通 ...

  4. 在JavaEE中使用Hibernate框架

    我们必须要了解一些Hibernate基础对象,如下: 配置对象 配置对象是你在任何 Hibernate 应用程序中创造的第一个 Hibernate 对象,并且经常只在应用程序初始化期间创造.它代表了 ...

  5. git上传本地代码到github

      1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小 ...

  6. @Param注解

    关于mybatis的@Param注解和参数 引用 https://www.cnblogs.com/whisper527/p/6568028.html 薇飘意 1,使用@Param注解 当以下面的方式进 ...

  7. django rest framework批量上传图片及导入字段

    一.项目需求 批量上传图片,然后批量导入(使用excel)每个图片对应的属性(属性共十个,即对应十个字段,其中外键三个). 二.问题 一次可能上传成百上千张图片和对应字段,原来数据库的设计我将图片和对 ...

  8. Java开发之@PostConstruct执行顺序

    构造函数==>postConstruct==>init==destory==>predestory==卸载servlet;; 从Java EE5规范开始,Servlet增加了两个影响 ...

  9. list类型功能剖析

    append  向后追加 name_list=["eirc","alex","tony"] name_list.append('seven' ...

  10. MyBatis SpringBoot 杂记

    最近接了个xxx代码. 不能说人家不好, 因为必进年月久了.能用这么长时间, 不就说明还不错么?! 我们现在每天写的, 能超出人家的么~~~ 呵呵 Java项目中, 把动态数据源切换的框架整合进来. ...