一张图解析如何让img垂直居中对齐
测试代码:
<!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垂直居中对齐的更多相关文章
- 【转】一张图解析FastAdmin中的表格列表的功能
一张图解析FastAdmin中的表格列表的功能 功能描述请根据图片上的数字索引查看对应功能说明. 1.时间筛选器如果想在搜索栏使用时间区间进行搜索,则可以在JS中修改修改字段属性,如 {field: ...
- 一张图解析nvm,npm,nodejs之间的关系
- 一张图解析FastAdmin中的表格列表的功能
大图: 1.默认生成的CRUD是没有菜单名称和描述显示的,如果需要显示则可以在后台修改,权限管理->菜单规则,给对应菜单的添加上备注信息后即可显示,支持HTML 2.TAB过滤选项卡 在一键生成 ...
- 两张图解读Java异常与断言
两张图解读Java异常与断言 --转载请注明出处:coder-pig 本节引言: 前天公布的"七张图解析Java多线程&quo ...
- 精华!一张图进阶 RocketMQ
前 言 大家好,我是三此君,一个在自我救赎之路上的非典型程序员. "一张图"系列旨在通过"一张图"系统性的解析一个板块的知识点: 三此君向来不喜欢零零散散的知识 ...
- 18张图,详解SpringBoot解析yml全流程
原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 前几天的时候,项目里有一个需求,需要一个开关控制代码中是否执行一段逻辑,于是理所当然的在yml文件中配置了一个属性作为开关,再配合nacos就可 ...
- 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域
× 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关 ...
- 一张图读懂https加密协议
搭建CA服务器和iis启用https:http://blog.csdn.net/dier4836/article/details/7719532 一张图读懂https加密协议 https是一种加密传输 ...
- 一张图看懂DNS域名解析全过程
DNS域名解析是互联网上非常重要的一项服务,上网冲浪(还有人在用这个词吗?)伴随着大量DNS服务来支撑,而对于网站运营来说,DNS域名解析的稳定可靠,意味着更多用户的喜欢,更好的SEO效果和更大的访问 ...
随机推荐
- OD: Exploit Me - Inject Instruction
修改之前的代码: #include<stdio.h> #include<stdlib.h> #include<string.h> #include<windo ...
- CSS投影实现方式
备用素材: 1.png shadow.png 第一种方式: 利用负边距实现 最终效果图: <!DOCTYPE html> <html lang="en"&g ...
- permission is only granted to system apps--Android manifest权限问题
在android的manifest.xml下编辑如下代码:<uses-permission android:name="android.permission.INTERNET" ...
- jq不识别拼接的对象id的解决方案
今天在做项目时,遇到了这么个问题. 先声明一下,我的id都是动态变换的.从1-10呢. <div id="a1"></div> <div id=&qu ...
- MFC 点击改变文本 加法计时器 伸缩窗体
1.添加所需控件,设置ID:labNum1,txtNum1.txtNum2.txtNum3.btnAdd,并将labNum1的属性Notify->true(控件在被单击或双击时可以发送消息) 2 ...
- shell中的declare命令
declare命令有如下选项: -a 声明一个数组 -i 声明一个整型 -f 打印所有函数定义 -F 仅打印函数名字 -r 声明一个readonly变量,该变量的值无法改变,并且不能为unset -x ...
- ie6里png图片不透明
ie6下img图片或背景图片为png时,图片变成了一片黑色: 图中的jquery-timepicker的两个黑方块和img就是由此原因引用的.解决方法:由Drew Diller提供,对img.back ...
- [转]NopCommerce MVC 插件机制分析
原文地址:http://www.cnblogs.com/haoxinyue/archive/2013/06/06/3105541.html 基本原理 插件话的应用程序一般都是先定义插件接口,然后把插件 ...
- TWRP-recovery中文界面安装方法[转]
把下载到的ui.zip放入sdcard1/twrp文件夹.注意,是内置存储卡中.如没有上述文件夹,自行建立后通过文件管理器放入,不是卡刷.文件夹应如下所示:sdcard1(内置SD) | ┕--t ...
- DirectUI中模态对话框和菜单的原理(自己控制整个Windows消息循环。或者,用菜单模拟窗体打开时用SetCapture取得控制权,一旦窗体收到WM_CAPTURECHANGED消息就把窗体退出)
经常有人问关于模态对话框和系统菜单内部实现原理方面的问题, 因为系统通过API隐藏了太多细节,这2个问题确实令初学者甚至是有经验的开发者困扰, 下面是我个人的一些经验总结. 先说模态对话框,外部看模态 ...