vertical-align相关

• 支持的属性值：inherit（继承），以及以下几类

Paste_Image.png

• 若为固定数值，则是在原有基础上进行偏移；若为百分比，则是在行高line-height基础上进行计算

• vertical-align作用的前提：1、只能作用于inline水平，如inline、inline-block；2、table-cell元素。ps:如果line-height太短，则不够居中，这就是为什么有些图片居中失效了

• table-cell的vertical-align:middle是作用于自身，而不是作用于子元素。
  以下可以实现图片居中：
  

  
  p{display:table-cell;vertical-align:middle}
  以下不能实现图片居中：
  
  
  p{display:table-cell;}
  img{vertical-align:middle}

• inline-block的基线，是正常流中最后一个Line box的基线，除非这个line box里面既没有line boxes 或者本身'overflow'属性的计算值而不是'visible'，这种情况下基线是margin底边缘

Paste_Image.png

Paste_Image.png

• top/bottom：与元素的顶部、底部对齐（line box）

• middle
  inline/inline-block元素：元素的垂直中心点和父元素基线上1/2x-height处对其。由于文字有下沉特性，所以字体越大，表现出来的效果越不居中（font-size:0时为完全居中）
  table-cell元素：单元格填充盒子相对于外面的表格行居中对其。td单元格不足，高度会用padding填充（使用js获取padding依然为0）

• vertical-align:text-top/text-bottom
  盒子顶部和父级content area的顶部（底部）对齐。（content area受字体、字号影响），因此有以下两个结论：
  1、元素vertical-align垂直对齐的位置与前后元素都没有关系。
  2、元素vertical-align垂直对齐的位置与行高line-height没有关系，只于字体大小有关。
  实际应用（表情）：

Paste_Image.png

Paste_Image.png

• 上标和下标
  vertical-align:super 提高盒子的基线到父级合适的上标基线位置。
  vertical-align:sub 同上，相反

• 相邻元素前后vertical-align不一致：垂直居中最佳写法，增加一个匿名的内联元素

Paste_Image.png

• 关注当前元素和父级，前后并没有直接影响。

• 解决IE7以下兼容性问题：将文字display:inline-block

• 最佳实践：
  1、图标文字对齐。以下方式可以兼容各种浏览器

Paste_Image.png

2、不定尺寸图片或多行文字的垂直居中：
①主体元素inline-block化；
②添加0宽度100%高度辅助元素
③vertical-align:middle

Paste_Image.png