今天写style的时候，icon和文字都是垂直居中，但是icon没有垂直居中。后来发现line-height和vertical的结合导致意想不到的样式不一样，特此总结一下vertical-align！vertical支持许多属性：/*关键字值*/;vertical-align:top;vertical-align:bottom;/*value*/vertical-align:10em;vertical-align:4px;/*value*/vertical-align:10%;/*全局值*/vertical-align:inherit;vertical-align:initial;vertical-align:unset;当vertical-align和line-height同时出现时，样式差异是因为：vertical-align的百分比值不是相对于fontSize或其他属性计算的，而是相对于line-height计算的。1、现象是在div中包裹了一个img标签，在div中添加了背景，div下面有一部分留白。这种现象是vertical-align和line-height的联合作用造成的。对于行内元素，vertical-align和line-height虽然看不见，但其实“无处不在”！2.幽灵空白节点是一个不可见的“节点”，宽度为0，表现得像一个普通字符。针对上面的问题，给文字加上白色背景，效果如下：Vertical-align默认的对齐方式是：baseline，也就是基线对齐。基线是文本的底部边缘。所以图像与文本的底边对齐，文本的高度由行高决定。解决方案1.使vertical-align无效。图片默认是内联的，vertical-align对块级元素不敏感。因此，我们只需要做图像块的显示层次即可。我们可以直接设置显示或浮动、绝对定位等给img标签加上display:block样式，把img改成块级元素，发现问题消失了。2.使用其他vertical-align值代替baseline，使用其他属性值，如：middle,top,bottommlign属性，空白节点消失。3、修改line-height值以下的空隙高度，其实就是计算出的文字行高到字母x下边缘的距离。因此，只要行高足够小，实际文字所占高度的底部就会在x的上方，下面的高度区域就没有支撑了。自然地，图片将与容器的底部边缘对齐。div{行高：5px;}4、line-height是相对单位，font-size间接控制Font-size，可以间接改变line-height的值，也可以消除空白节点。5.垂直居中设置div时{line-height:240px;}img{垂直对齐：中间；}此时页面看似垂直居中，但并不是完全垂直居中。中间行位置（字符x的中心）不是字符内容的绝对中心位置。两个位置的偏差就是图片近似居中的偏差。解决办法是：vertical-align:middletheblanknode，但是不能直接操作，所以用其他方法，即font-size:0div{line-height:240px;字体大小：0；}img{垂直对齐：中间；}此时的垂直居中才是真正的垂直居中。这种通过line-height设置高度，让元素垂直居中的方式vertical-align:middle不仅适用于现代浏览器，IE7浏览器也支持。6.一个好的解决方案：div{display:flex;align-items:center;}align-items属性定义了弹性项目在弹性容器当前行的横轴（垂直轴）方向上的对齐方式。
