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

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

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

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

零、先摘录一些 vertail-align 的固有特性

vertical-align 是用来做什么的？
首先，我们要明白 vertical-align 是用来垂直对齐的。接下来的探讨才有意义。

• 1、元素 vertical-align 垂直对齐的位置与前后元素都没有关系

  意即是说它不以前后元素的意志为转移；它是一条真理，从出生就在那里。

• 2、元素 vertical-align 与行高 line-height 没有任何关系。

  这个需要在不断的实践中得知

• 3、vertical-align 垂直对齐的位置只与 font-size 的大小有关系。

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

如上图，都是 inline-block 的元素，为什么会出现高度不齐的问题？明明只是有些元素内写了字而已啊？

解析三部曲：

• 1、vertical-align 的默认值为 baseline —— 它带来的作用是一行内，所有的行内元素(inline)、行内块元素(inline-block)，要根据基线对齐。
• 2、空白的块状行内元素的基线是元素顶端；其他元素的基线位于文本的底部。(所以说，以基线为标准，他们是对齐的。)
  
• 3、而 vertical-align 的默认值为 baseline。即是根据基线对齐大家都根据基线(但是问题是大家的基线本来就是不相同的)做了对齐。所以造成了这种现象。

其实事情的本质还是大家的基线是不一样的。在座的各位，虽然通过是否是男是女将你们分成了2个团体（也许还会有3个？？），但是用人类来形容你们总是没有问题的。

解决方案:
那么，我们就换一种对齐方式。我们设置 vertical-align: top;

把元素的顶端与行中最高的元素的顶端对齐。

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

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

二、那么让我们看下它有哪几种属性

可以看下 w3c 官网的东西。

乍一看，上面好多我没用过的属性。
我按照以下顺序用代码尝试一下吧。

• 1、baseline - 默认就是它
• 2、top - 把元素的顶端与行中最高元素的顶端对齐
• 3、bottom - 把元素的顶端与行中最低的元素的顶端对齐
• 4、middle - 把此元素放置在父元素的中部
• 5、text-top - 把元素的顶端与父元素字体的顶端对齐
• 6、text-bottom - 把元素的底部与父元素的底端对齐
• 7、sub - 垂直对齐文本的下标
• 8、super - 垂直对齐文本的上标
• 9、length -
• 10、% -
• 11、inherit - 从父元素继承（这个就不用说了）

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

两个充分必要条件

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

本文参考

• https://www.cnblogs.com/padding1015/p/9605286.html
• https://www.cnblogs.com/padding1015/p/9605286.html
• w3cschool

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

原文：https://www.cnblogs.com/can-i-do/p/12634131.html