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 官网的东西。

下面我们就来造一些示例把。

本文参考

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

标签：vertical,align,元素,顶端,114,基线,对齐
来源： https://www.cnblogs.com/can-i-do/p/12634131.html