其实vertical-align是用来设置行内元素对齐方式的。说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素。

对哪些元素可以使用Vertical-Align

vertical-align用于对齐行内元素。所谓行内元素，即display属性值为下列之一的元素：

  1. inline

  2. inline-block

  3. inline-table （本文未涉及）

其中，行内元素（inline element）就是包含文本的标签。

而行内块元素（inline-block element），顾名思义，就是位于行内的块元素。可以有宽度和高度（可以由其内容决定），也可以有内边距、边框和外边距。

行内级元素会相互挨着排成行。如果一行排不下，就会在下方再建一行。所有行都会创建所谓的行盒子，行盒子装着自己行中的所有内容。内容的高度不同，行盒子的高度也不同。在下面的示意图中，行盒子的顶部和底部用红色点线表示。

参考：

  1. https://www.cnblogs.com/wfeicherish/p/8884903.html
  2. https://www.jianshu.com/p/ce7e4a997a2c