vertical-align到底怎么用

作用

说实话，vertical-align属性算是学习前端初期接触的比较早的一个属性了。一开始以为它和text-align是对应的，一个设置文本横向显示位置，一个设置纵向显示位置。当然很早以前也就知道这种理解是错的。但是却一直没用彻底搞懂vertical-align到底是怎么使用的。

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

设置

有哪些可以设置的值呢？在这之前还是先了解一些概念吧，要不然肯定懵。

一、 基线相关

基线的位置并不是固定的：

• 在文本之类内联元素中，基线是字符x的下边缘位置

• 在像img元素中基线就是下边缘。

• 在inline-block元素中，也分两种情况

  1. 如果该元素中有内联元素，基线就是最后一行内联元素的基线。

  2. 如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的地边缘。

如果理解了基线的概念，那么我们来看基线相关的设置：

• baseline：默认值，就是基线对齐

<div style="background: green">
    x
    <img src="./man_active.png">
    <span style="display: inline-block;">vertical</span>
    <span style="display: inline-block; overflow: hidden;height: 80px;">123</span>
</div>

基线对齐1.png 基线对齐2.png

用代码看效果可以看出，x字符的下边缘，img元素的底边，有内容的inline-block元素都是对齐的，图2可以看出来overflow不是visible的inline-block元素的基线是margin的底边缘。
细心的会发现，那么为什么最下面有个空隙呢，那是因为第三个元素基线虽然对齐，但是基线并不是元素的底边。所以下面被默认的行高撑开了。

image.png

• sub：元素的基线向下移

• super：元素的基线向上移

image.png

• 具体的长度值

是正值基线就向上移动，如果是负值基线向下移动。

<div style="background: #398dee">
    <span style="vertical-align: -10px">负值效果</span>
    x
    <span style="vertical-align: 10px">正向移动10px</span>
</div>

长度值.png

• 百分比值：正负情况和长度值一样，需要知道的值是相对于行高（line-height）的百分比。

<div style="background: #398dee;line-height: 50px">
    <span style="vertical-align: -10%">负值效果</span>
    x
    <span style="vertical-align: 10%;">正向移动10px</span>
</div>

调整行高度试一下会发现，行高越大移动的距离越大。

百分比.png

二、边界相关

• top：（内联）元素的顶边和行内最高元素的顶边对齐

<div style="background: #398dee;padding-top:20px">
    <span style="font-size: 30px">x</span>
    <img src="./man_active.png" style="margin-top: 30px">
    <span style="color: red; vertical-align: top;">top</span>
</div>

top.png

这里需要注意的是：1、是和最高元素的顶边而不是和行的顶边对齐。因为设置了行的padding-top之后元素并没有顶在最上面；2、最高元素的顶边包括margin，看图可以发现设置了maigin-top也是会算在内的。
图片显示明显“top”的顶部和图片顶不对齐啊，不要忘了top这个元素是有行高的。而这里是说的元素的顶并不是字母的顶部。

image.png

• bottom：元素的底边和行的底边对齐。

bottom.png

• middle：元素上下边的中心点和行基线向上1/2x的高度位置对齐。

<img src="./man_active.png">
<span style="color: red; vertical-align: middle;">middle</span>

middle1.png

middle并不是我们理解的居中，而是近似。而且会受字体大小的影响偏移。

<span style="font-size: 30px">x</span>
<span style="color: red; vertical-align: middle;">middle</span>

middle2.png

• text-top：元素顶边和父级的内容区域顶边对齐

<div style="background: #398dee; padding-top: 20px">
    <span style="background-color: red;">text-top</span>
    <img src="./man_active.png" style="vertical-align: text-top;">
</div>

text-top.png

• text-bottom：元素底部和父级的内容区域底部对齐

text-bottom.png