vertical-align 和 line-height | 垂直居中

今天在写样式时，icon和文字都进行了垂直居中的处理，但是icon并没有垂直居中，后来发现由于 line-height 和 vertical 一起使用导致与预期样式不同，特此对 vertical-align 总结进行！

---

vertical 支持很多属性：

/*  关键字值  */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/*  <长度> 值  */
vertical-align: 10em;
vertical-align: 4px;
/*  <百分比> 值  */
vertical-align: 10%;
/*  全局值  */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

当 vertical-align 和 line-height 同时出现时出现样式差异是由于：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

1、现象

Div内包裹一个img标签，给div添加背景发现div下部分多出一部分留白空间，这个现象就是由于vertical-align和line-height共同起作用的原因。
对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！

2、幽灵空白节点

一个宽度为0, 表现如同普通字符的看不见的 “节点”。
对于上面的问题，给文字添加一个白色背景，效果如下：
Vertical-align默认的对齐方式为：baseline，也就是基线对齐。基线为文字的下边缘。
所以图片与文字的下边缘对齐，文字的高度是由行高决定。

解决方式

1、让vertical-align失效

图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等
给img标签添加display:block样式，将img变为块级元素发现问题消失了。

2、使用其他vertical-align值

不用baseline，使用其他的属性值，比如：middle、top、bottom
lign属性后空白节点消失。

3、修改line-height的值

下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。
div { line-height: 5px; }

4、line-height为相对单位，font-size间接控制

Font-size可以间接改变line-height的值，也起到消除空白节点的作用。

5、垂直居中

当设置

div { line-height: 240px; }
img { vertical-align: middle; }

此时的页面看似垂直居中，但是并没有完全垂直居中。middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。
解决方案即：将空白节点也进行vertical-align:middle，但是直接操作不能实现，因此利用其他的方式,即 font-size:0

div { line-height: 240px; font-size: 0; }
img { vertical-align: middle; }

此时的垂直居中也就是真正的垂直居中。
这种通过line-height定高，元素vertical-align:middle垂直居中的方法不仅适用于现代浏览器，连IE7浏览器也是支持的。

6、一种很好的解决方式

div {
    display:flex;
    align-items:center;
}

align-items 属性定义flex子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。