多个元素垂直方向对齐方式(vertical-align line-height)

元素的垂直方向对齐，是一个我随便使用的概念，为的是：
表达同一行的元素在垂直方向的对齐方式。

换句话说就是inline或者inline-block元素摆放在同一行时，每个元素在垂直方向上的对齐方式（block元素一个元素就可以占据一行，没必要谈什么在垂直方向的对齐）

由于inline inline block元素的垂直居中是由vertical-align决定的，因此，我们今天就来好好学习一下这个css属性。

vertical align作用于谁呢？

vertical align的默认值是baseline，只能作用域inline 或者inline-block元素对block元素无用

vertical align作用是什么呢？

错误的理解

对于这个问题，我们通常首先会想到的是，在一个大的div中有一个小div，希望这个小div在大div垂直方向的中间。对于这种情况是元素的垂直居中问题，是子元素在父元素中的定位问题.

正确的理解

当vertival-align作用于某一个元素的时候，能够决定该元素和其他在同一行的元素之间垂直方向的对齐方式。

vertical align 的值

image.png

根据图中可以看到，当vertical-align设置不同的值的时候，垂直方向对齐的位置应该在哪里。

默认值baseline

如何计算元素的baseline

• 对于一个有内容的inline-block元素：

  • 如果该元素overflow不是visible：baseline是margin底部边缘
  • 该元素的overflow是visible: baseline是其中最后一个inline元素的baseline

• 对于一个没有内容的inline-block元素：
  baseline是margin底部边缘

• 对于一个inline元素：
  inline元素的baseline计算方式如上图

• 对于img：baseline是margin底部边缘

baseline在不同的设备上出现的问题

对于一个有内容的inline-block元素

• 安卓：

  • 如果该元素的overflow不是visible： 那么该元素的基线一定是该元素margin底部
  • 如果该元素的overflow是visible： 那么该元素的基线就是最后一个inline元素的baseline

• ios
  他的基线就是最后一个inline元素的baseline，该元素的baseline不会受到overflow的影响

在同一行的所有按照baseline对齐的元素之间又该如何对齐？

在同一行中，会通过比较所有按照baseline对齐的元素的baseline(注意：一定是比较所有按照baseline对齐的元素，如果某个元素按照top对齐那么就不需要比较这个元素的baseline了)找到最低的baseline作为baseline对齐元素的对齐基准。

image.png

图中的黄线就是baseline

• 例子：如果此时设置左边的月亮星星图为veritcal-align：top那么这个元素的baseline就不需要参与比较了
  
  

  image.png

因此baseline变成了图中的红线

top和bottom

这两个value会比较好理解，当某一个元素被设置了vertical-align是这两个元素之一，那么这个元素就会找到这一行的最高处或者最低处，和自己的最高或者最低处对齐

• 例子

image.png

如上图，月亮星星图的veritcal-align是bottom,那么他就是和这一行的最低处对齐

当我把最后一个橘色div的veritcal-align改成bottom之后，整个这一行的最低处就提高了一些，此时月亮星星图以及div都是按照最低处对齐的

image.png

middle

将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐

由vertical-align造成的一些问题

img和text在一行的时候，img下留的空白

image.png

原因：

• 同一行中的元素，img的baseline是底部margin边缘，而text的baseline是x下边缘。
• 因此在当前行，图片的baseline作为对齐的基准
• 但是文字本身是有line-height的
  line-height = font-size + 行距
  
  

  image.png

• 因此留白的高度 = 半行距

解决思路 两种方案：

• 修改对齐方式给img设置vertical-align: middle
• font-size设置为0

关于第二种方案能解决问题的原因：

line-height和font-size

• line-height的真正高度=font-size * line-height 因此line-height的值一般是倍数
  

  

  image.png

• 元素中有三行文字，每一行是一个inlineBox,其高对应的css是line-height

• 在inlineBox里有一个区域叫做contentArea，这里显示的是文字，其高对应的css是font-size。

• 浏览器自动将contentArea区域设置在inlineBox区域的垂直居中位置。

• 在默认状况下：

element	font-size	line-height	line-height value
body	16px	Normal(1-1.2)	18px （line-height * font-size）

• 还有一些使用的窍门，注意通常不要将行高设置成px为单位可以参考该文档

注意： line-height的值为normal，但是normal的真正value并不是很确定，取决于当前你使用font-family,但是范围都在1-1.2之间

因此，当你将你的font-size设置成0，那么即使你不修改line-height的值，inline-box的高度也会变成0，从而使得行距变成0 就不会出现留白了