图片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 bc 命令简单学习

    1. bash里面能够实现比较简单的四则运算 echo $((*)) 注意是 双括号+ $ 地址符号. 2. 但是比较复杂的 可能就难以为继了 比如不支持精度 3. 所以这里面需要使用 bc 命令来执 ...

  2. 用stringstream可以用来分割空格、tab、回车换行隔开的字符串：

    #include <iostream> #include <sstream> #include <vector> using namespace std; int ...

  3. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. day 7-12 数据库的基本操作和存储引擎

    一. 储备知识 数据库服务器:一台高性能计算机 数据库管理系统:mysql(mssql等),是一个软件 数据库:db1(student_db),是一个文件夹 表:studen_info 是一个文件 记 ...

  5. React 避免重渲染

    组件的重新渲染 我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态.当 props 和 state 发生变化时 ...

  6. Linux基础学习（13）--Linux系统管理

    第十三章——Linux系统管理 一.进程管理 1.进程查看: (1)进程简介:进程是正在执行的一个程序或命令,每一个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源. (2)进程管理的 ...

  7. JQ获取URL中是否含有某个字符的话，对页面进行某种操作

    一.//JQ获取URL中是否含有某个字符的话,对页面进行某种操作 例:如果URL中含有xia的字符,就在页面引入一个cssvar str=window.location.href; //获取地址栏UR ...

  8. Yii2后台管理系统常规单据模块最佳实践

    后台管理系统的常规单据通常包括数据,页面,功能:其中数据,页面,功能又可以细分如下: 分类  二级分类  主要内容  注意事项  例如 数据 数据库迁移脚本  用于数据表生成及转态回滚 1.是否需要增 ...

  9. zh-CN、zh-Hans区别

    zh-CN:地区限制匹配规范,表示用在中国大陆区域的中文.包括各种大方言.小方言.繁体.简体等等都可以被匹配到. zh-Hans:语言限制匹配规范,表示简体中文.适用区域范围是全宇宙用中文简体的地方, ...

  10. PHP关联查询

    article文章表: aid title content uid 1 文章1 文章1正文内容... 1 2 文章2 文章2正文内容... 1 3 文章3 文章3正文内容... 2 4 文章4 文章4 ...