图片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. Postman的Post请求方式的四种类型的数据

    1. form-data 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件时 ...

  2. Azure系列2.1 —— com.microsoft.azure.storage.blob

    网上azure的资料较少,尤其是API,全是英文的,中文资料更是少之又少.这次由于公司项目需要使用Azure,所以对Azure的一些学习心得做下笔记,文中不正确地方请大家指正. Azure Blob ...

  3. Mybatis测试用例

    package cn.zhangxueliang.mybatis.mapper; import static org.junit.Assert.*; import java.io.InputStrea ...

  4. liunx 运维知识二部分

    Windows下的目录和Linux系统下的目录有什么区别? Windows目录下的文件一般都是分区(C盘,D盘...),C盘下面有什么目录,目录下面还有其他目录加上文件. Linux系统目录结构一切都 ...

  5. Python深入类和对象

    一. 鸭子类型和多态 1.什么是鸭子类型: 在程序设计中,鸭子类型(英语:Duck typing)是动态类型和某些静态语言的一种对象推断风格."鸭子类型"像多态一样工作,但是没有继 ...

  6. layui tips

  7. LODOOP中的各种边距 打印项、整体偏移、可打区域、内部边距

    Lodop中的打印项内容位置定位,除了打印项本身的top,left值,也会受其他设定或打印机的影响.打印开发,先用虚拟打印机测试出正确结果,然后客户端用打印维护微调常见问题:1.设置打印项相对于纸张居 ...

  8. Java 获取客户端ip返回127.0.0.1问题

    Java开发中使用 request.getRemoteAddr 获取客户端 ip ,返回结果始终为127.0.0.1.原因是服务器使用了nginx反向代理. 解决办法:在nginx配置文件nginx. ...

  9. caffe boost cuda __float128 undefined

    转载:https://blog.csdn.net/thesby/article/details/50512886 编译caffe-master时遇到的问题,__float128未定义,使用到cuda版 ...

  10. Vasya and a Tree CodeForces - 1076E（线段树+dfs）

    I - Vasya and a Tree CodeForces - 1076E 其实参考完别人的思路,写完程序交上去,还是没理解啥意思..昨晚再仔细想了想.终于弄明白了(有可能不对 题意是有一棵树n个 ...