关于vertical-align的种种

有些时候 vertical-align 的渲染结果并不同我们想象的一样。
虽然现在已经有很多 CSS 属性可以完美替代 vertical-align 的渲染效果，但有些时候碰到还是很头疼，所以最好还是搞清楚它。

☆作用对象：inline、inline-block子元素。
这个属性失效的情况：

1. 作用对象是块级元素（因为块级元素会霸占整行）；
2. 作用元素设置了浮动、定位等脱离文本流的属性（父元素设置这些属性不影响）；
3. 父元素是flex或grid布局（作用元素设置这些布局不影响）。

属性值：

值	描述
baseline	(default) 元素的基线与父元素的基线对齐。
top	把对齐的子元素的顶端与line box顶端对齐。
text-top	把元素的顶端与父元素内容区域的顶端对齐(文字顶端)。
middle	元素的中垂点与父元素的基线加1/2父元素中字母的高度对齐。
bottom	把对齐的子元素的底端与 line box底端对齐。
text-bottom	把元素的底端与父元素内容区域的底端对齐。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标。
inherit	采用父元素相关属性的相同的指定值。
长度	通过距离升高或降低元素。
%	通过相对于line-height属性的百分值升高或降低元素。0值等同于baseline。

看表格的描述太抽象，还不如来点儿实际的～
HTML 代码：

<div class="container">
  Father Text
  <span class="content">
  	Child Text
  </span>
  <img class="align" src="./img/xx.png" alt="vertical align image">
  <!-- 下面的图片不作特定垂直对齐,作为一个参照 -->
  <img src="./img/**.png" alt="reference image">
</div>

1. baseline：元素放在父元素的基线上。
   实际上文本子元素是文本内容放在父元素基线上。因为这是默认值，其他子元素都是baseline。
   

2. top：元素的顶端与行中最高元素的顶端对齐。

   .align { vertical-align: top; }
   

   从baseline看，这里的最高元素是参照图。
   

3. text-top：元素的顶端与父元素字体的顶端对齐。
   

4. middle：元素在父元素内垂直居中。
   可以看出，middle实际是指元素中部与父元素文本中部对齐。
   

5. bottom：元素底端与行中最低元素底端对齐。
   从baseline可以看出这里最低元素是 content 元素。
   

6. text-bottom：元素底端与父元素文本底端对齐。

   ！这和baseline是不一样的。

   

7. 长度值：使用定长表示元素底部与父元素基线的距离。
   正值升高元素，负值降低元素。0值等同于baseline。

   .align {
     vertical-allign: 10px; /* 元素相对于基线向下偏移2px */
   }
   

   

8. 百分比：元素底部相对于父元素基线移动相对于元素行高line-height的百分比。
   这里百分比是相对于元素的line-height值。

   .align { vertical-align: -10%; }
   

   假设.align本身未设置行高，继承的行高是20px，这里的-10%代表的实际值是-10% × 20 = -2px，所以是让元素下降 2 像素。
   
   设置.align行高为100px，这里的-10%代表的实际值是-10% × 100 = -10px，所以是让元素下降 10 像素。
   

   ！IE6 / 7 下的vertical-align百分比值不支持小数的line-height。