(1)、将一个图片放入一个div块中,div块背景颜色设置为aquamarine。将会发现图片与div块下边沿有一定间隙。
实例:
代码如下:
(2)、在div块的图片后面放入一个span标签,内容为xxxx!,会发现span标签内的元素与图片是在底线对其的,当给span加一个背景时,可以看到图片底部是与字母x底部对齐的。
实例:
实例:放大之后可以很明显的看出来!
代码如下:
为什么会出现这种现象呢?
答:原因是行内元素默认都受vertical-align(垂直对齐方式)和line-height(行高)的影响,而vertical-align默认的对齐方式是baseline,即基线对齐。这个基线就是span标签里的字母X的下边沿,故图片底部是与字母底部相对齐的(不是与span标签的背景对齐)。又因为字母本身有line-height(行高)值,所以span标签加上背景后比字母要高一些。
解决方法:(四种方法任意一种都可解决该问题)
(1)、将整个div内的font-size设置为0;
(2)、将图片img变为块级元素,即设置其为display:block;
(3)、给div设置一个行高(值尽量小些),设置为line-height:5px;
(4)、设置图片img垂直对齐方式vertical-align,值为top/middle/bottom任意一个都可以(为了覆盖默认的值baseline);
效果如下:
完整代码如下:
2、图片垂直居中的问题
在div和img中添加以下属性及属性值即可实现图片在div块中的垂直居中。
代码如下:
以上这篇浅谈css中vertical-align和line-height的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
原文地址:http://www.cnblogs.com/gaotenglong/archive/2016/07/26/5708793.html
前言 图片编辑器虽然是图片涂鸦工具,但是在当前疫情的大背景下,该工具还可以成...
一:基本选择器 标签选择:根据页面当中标签名字进行选择,直接把样式应用到指定...
选择器分组 假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使...
1. WebDesignerWall 2. Veerles Blog 3. Tutorial9 4. UX Booth 5. Inspired Mag...
本文介绍了canvas手机的手势解锁,分享给大家,顺便给自己留个笔记,废话不多说...
在开发微信小程序的时候,遇到圆形进度条的需求。使用canvas绘图比较麻烦: 1、...
下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性。 Window ...
序: 这是一篇关于 域名 投资、连续创业的人物稿,主人公是中国域名投资界最具影...
在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机...
一、总体思路: 1、表格无边框,背景颜色设置一种颜色(#DCDFE6),这样表格的边...