常见的对齐问题：浏览器是基于什么对齐图标和文本的？
为什么明明使用了 flex或vertical-align，图标还是看起来差了 1 像素没对齐？
文字图标布局
开发中遇见图片跟文字放在一行显示是最常见不过的了，两个行内元素的对齐通常也是最令人头疼，有时候明明使用了最常用的对齐方法，却总还是有些许偏差，先来看一个最基本的示例：
html部分：
xx测试对齐Style-
css部分：
.wrap {
width: 300px;
text-align: center;
margin: 20px auto;
font-size: 14px;
}
.wrap img {
width: 20px;
}
未使用对齐方式的效果如下：
默认的对齐方式是baseline，也就是x字母的最下面那条线。
这也就回答了第一个问题，浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准，也就是vertical-align:baseline;。
怎么让图片跟文字居中对齐呢，下面来看几种常见的解决方案。
常见的几种居中方案
1、使用vertical-align 居中对齐方式
.wrap {
vertic
