图片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. [转帖]HPE的软件部分到底是谁的?

    英国Micro Focus公司收购惠普旗下软件部门 http://www.gongkong.com/news/201710/369740.html 搞不清楚 现在ALM 到底是谁的资产了.. 据国外媒 ...

  2. Effective C++目录

    条款1:视C++为一个语言联邦 条款2:尽量以const.enum.inline替换#define 条款3:尽可能使用const 条款4:确定对象使用前已先被初始化 条款5:了解C++默认编写并调用哪 ...

  3. 微信小程序错误码参考大全

    开发过程中,会遇到很多微信返回的状态码,鬼知道代表什么意思,现在好了,整理总结了一份状态码,方便大家. 转载:http://www.yiyongtong.com/archives/view-1856- ...

  4. Granfana+PostgreSQL

    建表: create table pdm_log( id serial primary key, date_time timestamp with time zone DEFAULT CURRENT_ ...

  5. Spring Boot(1)——开发你的第一款Spring Boot应用(Edition1)

    Spring Boot(1)——开发你的第一款Spring Boot应用(Edition1) 准备工作: java:java 8 或者 java 9: Spring框架:5.0.8.RELEASE或以 ...

  6. springboot的几种启动方式

    一:IDE 运行Application这个类的main方法 二:在springboot的应用的根目录下运行mvn spring-boot:run 三:使用mvn install 生成jar后运行 先到 ...

  7. Django--CRM--菜单排序等

    一 . 菜单排序 1.我们想把菜单排序.首先给菜单加上权重,权重大的排在上面, 这就要在菜单表上加上一个权重字段. 2. 我们在菜单表里面把权重改一下 3. 需要把权重字段的信息拿出来放到sessio ...

  8. 老男孩python学习自修第十八天【面向对象】

    1.类与对象(构造方法与实例化) #!/usr/bin/env python # _*_ coding:UTF-8 _*_ class Province: def __init__(self, nam ...

  9. web浏览器兼容问题

    1.居中问题 div中,ie默认居中,而ff(firefox)默认是向左对齐.解决办法:margin 0 auto 2.高度问题 如果有两个div排列或者嵌套,如果第一个div设置了高度,而内容超出d ...

  10. Lodop获取客户端主网卡ip地址是0.0.0.0

    LODOP技术手册的GET_SYSTEM_INFO篇,LODOP可以用语句获取到客户端很多信息,NetworkAdapter.1.IPAddress是主网卡IP地址,通常情况下是没问题的,不过如果当前 ...