测试代码:

<!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. Ajax七层模型用途

    Ajax七层模型 OSI七层模型满足所有网格模型 1.物理层:符合标准: 2.数据链路层:如网卡.水晶头.连接网络层等: 3.网络层:路由器(数据外围打IP地址): 4.传输层:两台计算器端口的连接: ...

  2. Cretiria查询应用(一)

    1.查询所有 Criteria criteria=session.createCriteria(Dept.class);     //调用list()方法    List<Dept> li ...

  3. 高级 JsRender 模板功能

    转自:http://msdn.microsoft.com/zh-cn/magazine/hh975379.aspx 尽管模板很强大,但有时模板引擎提供的现成标准功能无法满足您的需求. 您可能要转换数据 ...

  4. Sicily 1194. Message Flood

    题目地址:1194. Message Flood 思路: 不区分大小写,先全部转化为小写,用stl提供的函数做会很方便. 具体代码如下: #include <iostream> #incl ...

  5. angularjs——module

    1.创建module //第一个参数是模块的名称 var head=angular.module('headApp',[]); head.controller("User",[&q ...

  6. .attr()和.prop()和.css()的区别

    是不是新手都会遇到这个问题?遇到过一次,在网上搜一搜,综合成了下面这样.重点参考了dolphin的‘jQuery的attr与prop’, 写的很清楚呢. 一般attribute翻译成中文术语为“特性” ...

  7. css应用三

    1. Padding与margin Padding为内边距,padding值会计算在width和height之内.如:width:100px:height:100px:padding:10px:该di ...

  8. 棋盘上的距离 - Grids1657

    棋盘上的距离 问题描述: 写一个程序,给定起始位置和目标位置,计算王.后.车.象从起始位置走到目标位置所需的最少步数. 王:横.直.斜都可以走,但每步限走一格. 后:横.直.斜都可以走,每步格数不受限 ...

  9. Hadoop学习历程（四、运行一个真正的MapReduce程序）

    上次的程序只是操作文件系统,本次运行一个真正的MapReduce程序. 运行的是官方提供的例子程序wordcount,这个例子类似其他程序的hello world. 1. 首先确认启动的正常:运行 s ...

  10. C语言初学 俩数相除问题

    #include<stdio.h> #include<stdlib.h> main() { double a,b;                       scanf(&q ...