测试代码:

<!DOCTYPE html>

<html>

<head>

    <style>

        .dd {

            background-color: gray;

            position: relative;

            line-height: 120px;

        }

        .d1 {

            font-size: 120px;

        }

        .d2 {

            font-size: 80px;

        }

        .d3 {

            font-size: 40px;

        }

        .d4 {

            font-size: 0px;

        }

        div {

            float: left;

        }

        div + div {

            margin: 0px 5px;

        }

    </style>

  </head>

<body>

    <div class="dd d1">

        <img style="height:60px;width:100px;background-color:red;vertical-align:middle">

    </div>

    <div class="dd d2">

        <img style="height:60px;width:100px;background-color:red;vertical-align:middle">

    </div>

    <div class="dd d3">

        <img style="height:60px;width:100px;background-color:red;vertical-align:middle">

    </div>

    <div class="dd d4">

        <img style="height:60px;width:100px;background-color:red;vertical-align:middle">

    </div>

</body>

</html>

发现没，跟font-size关系很大，vertical-align:middle的原理是：

所以font-size越小，这个对齐线越接近div的中间线。

vertical-align：middle属性见
vertical-align各属性对比

一张图解析如何让img垂直居中对齐的更多相关文章

  1. 【转】一张图解析FastAdmin中的表格列表的功能

     一张图解析FastAdmin中的表格列表的功能 功能描述请根据图片上的数字索引查看对应功能说明. 1.时间筛选器如果想在搜索栏使用时间区间进行搜索,则可以在JS中修改修改字段属性,如 {field: ...

  2. 一张图解析nvm,npm,nodejs之间的关系

  3. 一张图解析FastAdmin中的表格列表的功能

    大图: 1.默认生成的CRUD是没有菜单名称和描述显示的,如果需要显示则可以在后台修改,权限管理->菜单规则,给对应菜单的添加上备注信息后即可显示,支持HTML 2.TAB过滤选项卡 在一键生成 ...

  4. 两张图解读Java异常与断言

    两张图解读Java异常与断言                                 --转载请注明出处:coder-pig 本节引言: 前天公布的"七张图解析Java多线程&quo ...

  5. 精华！一张图进阶 RocketMQ

    前 言 大家好,我是三此君,一个在自我救赎之路上的非典型程序员. "一张图"系列旨在通过"一张图"系统性的解析一个板块的知识点: 三此君向来不喜欢零零散散的知识 ...

  6. 18张图，详解SpringBoot解析yml全流程

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 前几天的时候,项目里有一个需求,需要一个开关控制代码中是否执行一段逻辑,于是理所当然的在yml文件中配置了一个属性作为开关,再配合nacos就可 ...

  7. 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

    × 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关 ...

  8. 一张图读懂https加密协议

    搭建CA服务器和iis启用https:http://blog.csdn.net/dier4836/article/details/7719532 一张图读懂https加密协议 https是一种加密传输 ...

  9. 一张图看懂DNS域名解析全过程

    DNS域名解析是互联网上非常重要的一项服务,上网冲浪(还有人在用这个词吗?)伴随着大量DNS服务来支撑,而对于网站运营来说,DNS域名解析的稳定可靠,意味着更多用户的喜欢,更好的SEO效果和更大的访问 ...

随机推荐

  1. 添加序号列（SQL Server）

    SELECT ROW_NUMBER() OVER (ORDER BY 实际缴费金额 ) AS A, --序号 RANK() OVER (ORDER BY 实际缴费金额 ) AS B, --相同跳过从新 ...

  2. C#析构函数，类运行结束后运行

    public class Students { //创建对像时使用 public Students(string name, int age, char gender, int englist, in ...

  3. 【转】C++中的位拷贝与值拷贝

    [转]http://blog.csdn.net/liam1122/article/details/1966617 为了便于说明我们以String类为例: 首先定义String类,而并不实现其成员函数. ...

  4. xode 中文乱码处理

    find *.* -exec sh -c "iconv -f GB18030 -t UTF-8 {} > {}.txt" \;

  5. Spring4分别整合mongo2.X和3.0

    1.pom文件添加: <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-jav ...

  6. [Mugeda HTML5技术教程之8]添加行为

    上一节我们已经在新建的作品中添加了元素和动画,如果我们想要作品能够和用户互动,就需要给元素添加动作行为.在舞台上选中一个要添加动作的元素,在属性栏的动作下拉列表中选择一个动作.可选类别有链接.表单.行 ...

  7. MySQL Left Join,Right Join

    魂屁,东西发这里了关于Left Join,Right Join的 在讲MySQL的Join语法前还是先回顾一下联结的语法,呵呵,其实连我自己都忘得差不多了,那就大家一起温习吧(如果内容有错误或有疑问, ...

  8. js定时跳转

    在项目中有时会用到定时跳转,自己收藏了一个比较好用的 js写的,不依赖jQuery <script type="text/javascript"> function c ...

  9. FJ省队集训最终测试 T2

    思路:发现如果一个人一共选了x个点,那么选中某一个点对的概率都是一样的,一个人选x个点的总方案是C(n,x),一个人选中某个点对的总方案是C(n-2,x-2),这样,那么选中某个点对的概率就是 x*( ...

  10. UNIX网络编程--IPV4 IPV6 ICMPV4 ICMPV6

    一.IPV4首部 IP层提东无连接不可靠的数据报递送服务.它会尽力把IP数据报递送到指定的目的地,然而并不保证他们一定到达,也不保证他们的到达顺序与发送顺序一致,还不保证每个IP数据报只到达一次.任何 ...