测试代码:

<!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. 动软代码生成V2.74模版简介

    最近发现很多人用动软代码生成,确实方便,有些经验记录下,以后查看回顾. ..\Maticsoft\Codematic2\Template\TemplateFile 为模板文件夹,直接在目录下新建文件夹 ...

  2. Dev系列控件的AJAX (转)

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

  3. XAML 概述

    我们将向 Windows 运行时应用开发人员介绍 XAML 语言和 XAML 概念,并介绍在使用 XAML 创建 Windows 运行时应用时,在 XAML 中声明对象和设置属性的不同方式. 什么是 ...

  4. Swift中可能失败的构造器的传播(调用)和重写

    import Foundation /* 可能失败构造器的传播(调用) 1.可能失败的构造器可以调用同一个类中的普通构造器 2.普通构造器不能调用同一个类中的可能失败构造器 3.结构体中, 普通构造器 ...

  5. SwfUpload及imgareaselect使用方法

    1.导入文件 Swfupload相关文件 imgareaselect截取插件相关文件 2.前端html代码 添加一个截取图片的按钮,其他为swf所需的html. <body> <di ...

  6. ref参数的用途

    ref参数 能够将一个变量带入方法进行改变,改变完成后再将改变完成后的变量带出方法 ref参数要求在方法外必须为值赋值,而方法内可以不赋值 static void Main(string[] arr) ...

  7. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  8. discuz3.2x增加邮箱验证功能

    为防止垃圾用户多次注册,为disczu增加邮箱验证功能. 大致分为二步: 1.申请邮箱,这里推荐使用腾讯免费企业邮箱:https://exmail.qq.com/portal/introducefre ...

  9. GetMemory 函数解析

    GetMemory函数 代码1: void GetMemory(char *p){ p = (char*)malloc(100);}int main(int argc, char *argv[]){ ...

  10. Windows server 2012 各版本 激活方法

    Windows server 2012 激活教程 本文包括以下两种版本的激活过程:(注意RC版的是不能激活的!) 1.Windows server 2012 试用版本激活 2.Windows serv ...