114.关于前端的vertical-align详解

以前一直没有注意这个属性，现在愈来愈发现其属性重要性。

对于一种技术的掌握，你会选择踏实的掌握每一个细节？还是只想要模糊地一知半解？最后使用的时候再来通过不断地试错来达成目的？

技术不是枪，允许你通过试错的方式实现，你不会因为时间慢了1s而没命；但是，提升效率和准确性，是非常有必要的。

一、先来看一些 vertical-align 导致的怪象抛砖引玉

如上图，都是 inline-block 的元素，为什么会出现高度不齐的问题？

大家的设置除了无伤大雅的颜色，其他都是一样的，为什么你肚子里有字，你就不一样了呢？？？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  div {
    display: inline-block;
     100px;
    height: 100px;
    text-align: center;
    font-size: 10px;
  }
  .box-1 {background-color: #5bc2e7;}
  .box-2 {background-color: #6980c5;}
  .box-3 {background-color: #70dfdf;}
  .box-4 {background-color: #f7f6ee;}
  .box-5 {background-color: #385466;}
</style>
</head>
<body>
  <div class="box-1">#5bc2e7;</div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4">#f7f6ee</div>
  <div class="box-5">#385466</div>
</body>
</html>

解析其实只需要两步，很容易看懂：

1、vertical-align 的默认值为 baseline —— 它带来的作用是一行内，所有的行内元素(inline)、行内块元素(inline-block)，要根据基线对齐。
2、空白的块状行内元素的基线(img也是)是元素的底部；其他元素的基线位于文本的底部。(所以说，以基线为标准，他们是对齐的。)

按照以上的原理，让我们来画个他们的基线：

可见，空白块元素的基线与文本的底部是对齐了的。

解决方案:
既然根据规则里面的基线对齐原则无法让他们等高，那么我们就换一种方式来对齐。我们设置第一个元素 vertical-align: top;

使元素及其后代元素的顶部与整行的顶部对齐。

所以我们重新定义元素们的 vertical-align 为 top。top呢，是把元素的顶端与行中最高的元素的顶端对齐。

从上面的例子中，我们可以知道 vertical-align 默认的属性是 baseline（基线对齐）。

二、那么让我们看下它有哪几种属性(这里的变种很多，请大家认真看)

可以看下 w3c 官网的东西。

乍一看，上面好多我没用过的属性。
我按照以下顺序用代码尝试一下吧。一个比较复杂的例子。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .wrap {
      background: #f7f1ee;
    }
    .inline-div-1 {
       100px;
      height: 100px;
      display: inline-block;
      background: #5bc2e7;
    }
    .inline-div-2 {
       100px;
      height: 100px;
      display: inline-block;
      background: #deb5e2;
    }
    .inline-img-1 {
      background: #089e8a;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="test inline-div-1">
      A.我是inline-block的div块。#5bc2e7
    </div>
    <div class="test inline-div-2">
      B.div块2222
    </div>
    <span class="test inline-text-1">C.我是文字</span>
    <img class="test inline-img-1" src="./风车.png" alt="">
    <span class="test inline-text-2">E.我也是文字</span>
    <button class="test inline-button-1">F.I'm button.</button>
  </div>
</body>
</html>

这里提前注意一下，我们没有设置 line-height；这样没有其他干扰项，更易于理解。

1、baseline - 默认就是它，所谓的基线对齐。空白块基线为底部、其他基线为文字的底部（英文字母的第三条线）。

这里我们发现，A元素的文字比较多，但是文字的最底部，还是努力地基线对齐了
2、top - 把元素的顶端与行中同级最高元素的顶端对齐。
```
.test {
  vertical-align: top;
}
```
3、bottom - 把元素的顶端与行中同级最低的元素的顶端对齐
```
.test {
  vertical-align: bottom; 
}
```
4、middle - 把此元素放置在父元素的中部(这里的高度为行内最高元素所撑开的最大高度)
```
.test {
  vertical-align: middle; 
}
```
通过这个我们其实能够实现垂直居中。然后我们降低一行行内最高的元素————图片的高度看下效果。
```
.inline-img-1 {
  background: #089e8a;
  height: 50px;
}
```
5、text-top - 把盒子的顶部与父字体(内容)的顶端对齐

这个我们做一点特殊的操作，让大家更容易理解。它是由 font、font-size、font-weight来决定的。

6、text-bottom - 把元素的底部与父元素的底端对齐
7、sub - 垂直对齐文本的下标
不讲了，用不到。
上标和下标对应着两个标签super和sub，super在上面，sub在下面，这两个属性值在数学公式和化学表达式中用得比较多，平时我们开发几乎用不到，也没啥好讲的。
8、super - 垂直对齐文本的上标
不讲了，用不到。
上标和下标对应着两个标签super和sub，super在上面，sub在下面，这两个属性值在数学公式和化学表达式中用得比较多，平时我们开发几乎用不到，也没啥好讲的。
9、length
不讲了，用不到。
10、% -
不讲了，用不到。
11、inherit - 从父元素继承（这个就不用说了）

三、一个可以尝试的操作，有助于理解

如上的 html 和 css，如果我们设置 .test类（相当于设置所有）和单独设置行内的某个元素，我们会发现实现的效果差异很大。

比如我们单独给图片设置 vertical-align 设置 top；这个时候发现我们的例子整体往上移动了。原因是这个时候图片不参与 baseline 了；大家为了达成一致，不需要踮起脚尖了。

根源还是在于，一行内，默认是 baseline 对齐的！默认是 baseline 对齐的！默认是 baseline 对齐的！

所以我们会发现，行的高度被撑开了；因为图片和文字默认是 baseline；他们要对齐，高度就必被撑开。

如果你没有进行任何设置、或者仅设置了行内的某些元素；其他元素依旧会按照 baseline 对齐。

四、vertical-align 什么时候起作用？

两个充分必要条件

1、布局方式：inline-block 或者 inline 或者 table-cell
2、行高要足够（不然你没法通过 vertical-align 来进行垂直居中）

本文参考

complete.