深入理解verticalalign

vertical-align定义行内元素（inline和inline-block）的基线相对于该元素所在行的基线在垂直方向上的对齐方式，即与匿名文本大写字母X底边对齐，默认值baseline，当属性值为数值或百分比时正负值均可。

属性值介绍：

baseline表示元素基线和父元素基线对齐
sub表示降低元素的基线到父元素合适的下标位置，这个合适位置由浏览器决定
super表示升高元素的基线到父元素合适的上标位置
top元素顶端与行框（line box）顶端对齐
middle元素的中垂点与父元素基线加1/2父元素中大写字母X的高度（个人理解：元素顶端与行框中字母X的中线对齐）
bottom元素底端与行框底端对齐
text-top元素顶端与父元素内容区顶端对齐
text-bottom元素的底部与父元素内容区底部对齐
length元素基线相对于父元素基线的上下偏移，为正值时向上偏移，为负值时向下偏移
%元素基线相对于父元素基线上下偏移，偏移值是相对于父元素行高而非高度

关于上面涉及到的一些感念，可参考这篇文章：深入理解line-height

各属性值结果：

百分比解析

 .t {
   font: 40px '宋体';
    500px;
   background-color: lightgreen;
   line-height: 1;
   margin-bottom: 40px;
 }

由于浏览器默认的行高一般是1.2，为了不影响计算我重置了行高为1。由字体大小为40px可计算得出行高为40 * 1 = 40px，所以在上面的例子中，当使用设置vertical-align: 10%时，可以计算出元素的偏移量为40 * 10% = 4px。需要注意的是不要被子元素的行高影响，子元素的行高只影响父元素的高度，不会影响父元素的行高。

图片底部间隙

  <div style="background-color: yellow;">Xg
  <img src="https://cdn.86886.wang/blog/1520049889768.jpg" alt="">
</div>

结果：

Xg

上面图片的底部间隙产生的原因是因为图片垂直方向上默认是基线对齐(vertical-align: baseline)，即图片的底部与匿名文本大写字母X的底部对齐，而匿名文本默认是有行高的，所以就有了底部的间隙。

解决方法：

方法1：把图片display设置为block，因为vertical-align属性对block元素是无效的。
方法2：把父元素的行高设置为0，这样子元素的行高继承以后也就是0，没有了行高自然没有了间隙。
方法3：把图片的vertical-align设置为top/middle/bottom中任一值

图片垂直居中

 <style>
  .t1 {
     250px;
    line-height: 250px;
    font-size: 0;
    background: green;
    text-align: center;
  }
  .t1 img {
    vertical-align: middle;
  }
</style>
<div class="t1">
  <img src="https://cdn.86886.wang/blog/1520049889768.jpg" alt="">
</div>

结果：

多行文本的垂直水平居中

  <style>
  .t2 {
     150px;
    line-height: 100px;
    font-size: 0;
    background: green;
  }
  .t2 span {
    display: inline-block;
    font-size: 16px;
    line-height: 1.5;
    vertical-align: middle;
  }
</style>
<p class="t2">
  <span>你好你好你好你好你好你好你好</span>
</p>

结果：

你好你好你好你好你好你好你好