测试代码:

<!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. Dev系列控件的AJAX (转)

    介绍Dev系列控件在前台也就是客户端的一些常用方法介绍以及前后台异步通信的方法. 一.Dev Data Edit控件通用属性以及方法: 属性 1.GetEnabled():返回控件是否为可操作状态 2 ...

  2. C#中的switch case

    在C#中switch(type){case tpye1:break;case tpye2:break;case tpye3:break;case tpye4:break;};其中type可以是数字,也 ...

  3. android 自定义view之 TypeArray

    在定义view的时候,我们可以使用系统提供的属性,也可以自定义些额外的属性来设置自定义view的样式,这个时候,我们就需要TypeArray,字面意思就是Type 数组. 今天我们就讲讲如何自定义Vi ...

  4. 如何改写WebApi部分默认规则

    为什么要改 最近公司在推广SOA框架,第一次正经接触这种技术(之前也有但还是忽略掉吧),感觉挺好,就想自己也折腾一下,实现一个简单的SOA框架 用过mvc进行开发,印象之中WebApi和Mvc好像是一 ...

  5. java学习笔记（3）：java的工作原理及相关基础

    一.运行机制 如上图所示,图中内容即为Java的运行机制: 1.我们一开始所编写的代码文件存储格式为(如text.java)文件,这就是源程序文件 2.在Java编辑器的作用下,也就是就行了编译,形成 ...

  6. struct可以拥有class般的构造函数

    struct A { int a, b; A(int x, int y) :a(x), b(y){} }; int main() { A a(1, 2); cout << a.a < ...

  7. MySQL按照汉字的拼音排序(转)

    按照汉字的拼音排序,用的比较多是在人名的排序中,按照姓氏的拼音字母,从A到Z排序: 如果存储姓名的字段采用的是GBK字符集,那就好办了,因为GBK内码编码时本身就采用了拼音排序的方法(常用一级汉字37 ...

  8. HTML&CSS基础学习笔记1.24-input标签的单选与多选

    单选和多选 单选框和多选框是用<input>标签来实现的. <input>标签的type属性值为"checkbox"时,表示多选框,为"radio ...

  9. iOS开发 - 不进入待机(屏幕保持唤醒)---UIApplication学习

    iOS开发 - 不进入待机(屏幕保持唤醒)---UIApplication学习 如果你不希望应用运行时 iPhone 进入锁屏待机状态,加入下面这行代码即可 [[UIApplication share ...

  10. 【转】const的用法，特别是用在函数前面与后面的区别！

    在普通的非 const成员函数中,this的类型是一个指向类类型的 const指针.可以改变this所指向的值,但不能改变 this所保存的地址. 在 const成员函数中,this的类型是一个指向 ...