转载自https://blog.csdn.net/FE_dev/article/details/75948659

说明

vertical-align属性，是CSS属性中一个比较重要的属性，也是比较不好理解的一个。 
我们今天就来说说它。

解释

先来看看他的定义。

定义和用法

vertical-align 属性设置元素的垂直对齐方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表格中，这个属性会设置单元格框中的单元格内容的对齐方式。

上面这段话，的确不是很好理解，没关系，我们先不用去管他，不过我们先要记住一个事情。

只有元素属于inline或是inline-block ，vertical-align属性才会起作用。 
例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

我们继续来看看，vertical-align 可以取的值

你可能会奇怪，一个div 里面 放一个 img 会有什么事呢？ 
div的背景是蓝色，我们来看看效果图。 
 
奇怪的事情出现了，为什么图片下面会有一点点的空隙呢？ 
这就要说到 vertical-align 和 line-height ，不过在这之前我们要先说说，vertical-align 的默认值 baseline，看下面这张从张鑫旭大神那借来的图就好了。

我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。图中的红色线即为基线。

我们在图的旁边写点字看看，就很清楚了。 

我们能看见，图片是和文字x的下边缘，也就是基线对齐的，并不是和底线对齐。 
现在我们调整图片的 vertical-align 属性值 为bottom，看看会怎样

效果图 

好了，那一点点的空隙没有了，这个时候你可能又有问题问了，最开始的时候，图片旁边没有文字啊，那vertical-align 应该没用啊，为什么下面还有空隙呢？

这个呀，就是要注意的地方了，其实，图片下面会有一点点的空隙，最根本的原因是因为，baseline发生了移动，不过我们为了方便记忆和理解，可以认为图片旁边有一个空白节点，他和文字的表现是一样的，所以我们设置图片的 vertical-align 就能解决这个问题。

既然我们知道了这些，那我们就能想到更多的解决方案了。 
1、设置vertical-align的值，不使用baseline，使用bottom/middle/top都是可以。

2、我们知道vertical-align 的默认值是 baseline，它会和文字的基线对齐，我们直接去掉文字的高度也是可以了的，而文字的高度是由行高决定的，所以我们直接给div设置 line-height: 0; 也能解决问题。

3、说一下 line-height，它的默认值一般为1.2，当 line-height取值为数字或百分数时，它是基于当前字体尺寸来计算的，也就是font-size的大小，所以我们直接给div设置font-size: 0; 也是可以解决问题的。

4、我们最开始提到过，只有元素属于inline或是inline-block ，vertical-align属性才会起作用。所以我们直接让vertical-align属性失效也可以解决问题，那就直接给img 设置 display: block; 就可以了

总结

这次主要说了一些 vertical-align属性的基础的东西。 
但是还是有一些要注意的地方。

1、只有元素属于inline或是inline-block ，vertical-align属性才会起作用。 
2、vertical-align，取值是百分数值时，是相对于此标签继承的line-height值决定的。 
3、line-height，取值是百分数值时，是相对于当前的font-size值决定的。 
4、文中提到的图片下方会有空隙，必须是HTML5文档声明才会有的，其他的文档声明没有空白，就是必须要有<!DOCTYPE html>这句才可以。

最后 推荐几篇讲 vertical-align 的文章

关于Vertical-Align你需要知道的事情

我对CSS vertical-align的一些理解与认识（一）

CSS深入理解vertical-align和line-height的基友关系

CSS的vertical-align的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  3. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  4. css position:absolute align center bottom

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  6. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

  7. 对CSS居中的一点总结

    在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到.居中的技巧有很多,但在编写代码的过程中,发现有时候技巧管用,有时候不管用,于是就将每个知道的方案都 ...

  8. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  9. 来自平时工作中的css知识的积累---持续补充中

    ① 现代浏览器中,<img>元素默认情况下底部会有空白,那么这个空白到底是从哪里来的? 解惑: method-one:猛戳 来自知乎的解答 method-two: 延伸阅读 what is ...

  10. css 居中，中央

    在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...

随机推荐

  1. Stream基础知识

    Stream API Stream是Java8中处理集合的关键抽象概念,它可以指定你希望对集合进行的操作,但是将执行操作的时间交给具体实现来决定.例如,如果你希望计算某个方法的平均值,你可以在每个元素 ...

  2. poj 3320(尺取法)

    传送门:Problem 3320 参考资料: [1]:挑战程序设计竞赛 题意: 一本书有 P 页,每页都有个知识点a[i],知识点可能重复,求包含所有知识点的最少的页数. 题解: 相关说明: 设以a[ ...

  3. spring-data-jpa与mybatis的对比

    Spring Data JPA 与 MyBatis对比 Spring Data JPA是Spring Data的子模块.使用Spring Data,使得基于“repositories”概念的JPA实现 ...

  4. 困惑2----（已经OK）

    题目: 运行结果:以及图示分析 源代码: package com.mon11.day18; /** * 类说明 : * @author 作者 :chenyanlong * @version 创建时间: ...

  5. DNSLog注入笔记

    测试一些网站的时候,一些注入都是无回显的,我们可以写脚本来进行盲注,但有些网站会ban掉我们的ip,这样我们可以通过设置ip代理池解决, 但是盲注往往效率很低,所以产生了DNSlog注入.具体原理如下 ...

  6. Scala进阶之路-尾递归优化

    Scala进阶之路-尾递归优化 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 递归调用有时候能被转换成循环,这样能节约栈空间.在函数式编程中,这是很重要的,我们通常会使用递归方法来 ...

  7. Ubuntu 下 Tomcat7 的安装和配置

    tomcat下载地址:http://tomcat.apache.org/download-70.cgi 声明:下面的内容和原创笔者的博文的内容差不多,不一样的只是tomcat7的安装目录不同,我按照我 ...

  8. 第三次实验计算分段函数 第四次计算分段函数和循环NEW 第五次分支+循环加强版 实验报告

    一.实验题目,设计思路,实现方法 第四次分支+循环 加强版 (2-2计算个人所得税,2-7 装睡,2-8计算天数) 设计思路:2-2 用if-else的语句,与计算分段函数的题类似的做法:2-7 运用 ...

  9. A - 低阶入门膜法 - K-th Number （主席树查询区间第k小）

    题目链接:https://cn.vjudge.net/contest/284294#problem/A 题目大意:主席树查询区间第k小. 具体思路:主席树入门. AC代码: #include<i ...

  10. 重新看halcon模板匹配

    工业中模板匹配有很多需求. 代码如下: read_image (Image, 'J:/测试图片/test1/1.bmp') get_image_size (Image, Width, Height) ...