测试代码:

<!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. c#.net防止按F5刷新页面重复提交的方法

    在网上购物的过程中,提交完一个页面后,如果此时按f5刷新,则会弹出一个提示:如果继续,则会重新发送提交我们刚才提交的内容,这个问题应该规避掉,不然总是重复提交付款,那可不是件好事. 在c#.net中的 ...

  2. 腾讯云(centos)上安装apache

    安装 yun install httpd 随系统自启动 chkconfig httpd on 修改/etc/httpd/conf/httpd.conf文件 #修改WWW目录为自己的目录 Dcoumen ...

  3. 生成getter()、setter()方法去掉变量前缀

    当定义的变量名有前缀但是不想在生成它的getter()和setter方法的时候让前缀出现,比如今天项目的部分代码: public class Crime { private UUID mId; //标 ...

  4. DX笔记之五------游戏画面绘图之绘制位图

    本系列文章由zhmxy555编写,转载请注明出处. http://blog.csdn.net/zhmxy555/article/details/7335103 共四步 步骤一:加载位图 步骤二:建立与 ...

  5. 《Linux多线程服务器端编程》读书笔记第3章

    <Linux多线程服务器端编程>第3章主要讲的是多线程服务器的适用场合与常用的编程模型. 1.进程和线程 一个进程是"内存中正在运行的程序“.每个进程都有自己独立的地址空间(ad ...

  6. jquery1.9学习笔记 之层级选择器(一)

    子选择器(“parent > child”) 描述:选择所有父元素的直系子元素. 例子: <!doctype html> <html lang='zh'> <hea ...

  7. Hadoop学习历程（二、配置）

    以下是进行单节点Hadoop配置的内容,多节点也类似 1. 进行Hadoop的安装 1.1 上文进行了Hadoop的编译,将编译结果目录 hadoop-2.2.0 拷贝为 /usr/hadoop 目录 ...

  8. HTML&CSS基础学习笔记1.27-input提交数据

    提交数据 我们在表单上填的信息很多情况下需要提交到后台. <input>的[type]属性值为“submit”时,表示提交表单数据.它在页面的表现形式也是个按钮,点击该按钮,表单数据将会提 ...

  9. 容器 MAP

    1.equal_range pair <myMapDef::iterator,myMapDef::iterator> myresult; myPairDef ps=*MyMap1.begi ...

  10. 关于 VS2013监视窗口的内存面板及寄存器面板

    1.插入断点,按F5调试,2.选择菜单项 debug-窗口-3.即可找到您要的监视窗口.