起因
对于以上这种按钮来说，这是一个比较常见的场景，就是图标+文字，但碍于强迫症的我来说，有时候总感觉没对齐，现在在这里完整梳理一下，方便后面又头疼。
探究
图标的话一般是用img,svg和i元素字体显示的，基本上就这三种，所以分析的情况也不一样，因为img是不受字体影响的，而svg和i元素字体显示会受字体的影响，导致文本与图标的基线不同，导致不是上偏一点，就是下偏移一点，对于不同的情况，也有不同的解决办法，需要按情况处理。
vertical-align对齐
如下情况:
仔细去看的话，图标是往上走了一点。因为是svg在此显示为行内元素，可以接受行内元素样式的影响，因此可以通过vertical-align调整一下，vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。所以只需给svg添加vertical-align: middle即可。以上编辑器中有，可以取消注释看看其效果，是不是垂直居中了。因此,这也是一种常见的解决方式，不过自然，别的方式也有，针对特殊情况也是可以使用的。
inline-block文字基线对齐法
思路很简单，要让图标和文字对齐，就让i图标高度和和文字行高一致并且是对齐，然后图标背景居中就可以了，问题在于inline-block元素内没有内联元素或者overflow不是visible则其基线是margin底边缘（参考），这样和文字对齐时候就会有上下交错导致行框的高度都增高了，既然这样我们只要让i图标基线和文字基线一致就能保证和文字对齐了，方案就是在其中包含文字同时文字又不显示出来：
用元素插入文字，用一个很大的text-indent来隐藏文字就可以达到想要的效果了。
ex对齐法
同上一个方法相似，css中有一个ex的单位，内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。假如我们图标高度就是1ex, 同时背景图片居中，完全不受字体和字号的影响。因为ex就是一个相对于字体字号的单位。(参考)
这里加个background-size: contain;保证图标的自适应，由于这里高度是1ex，所以图标高度是比较小的，适合收缩展开小三角图标。
绝对定位法
说到绝对定位的方法就比较简单了，给button元素设置一个较大的padding-left，postion设置为relative，然后图标绝对定位，这里icon绝对定位还可以使用伪元素。
.btn {
...
position: relative;
padding-left: 32px;
}
.icon {
position: absolute;
width: 20px;
height: 20px;
left: 12px;
}如果上层元素没有影响absolute的定位，其实可以省去button的相对定位，直接使用无依赖绝对定位即可，用margin-left调整位置：
.btn {
...
padding-left: 32px;
}
.icon {
position: absolute;
width: 20px;
height: 20px;
margin-left: -20px;
}flex布局法
这个直接给button设置display: flex;align-items: center;即可，但是button变为块级元素，可以考虑使用inline-flex，但是可能需要处理与其他元素对齐的问题，因此如果按钮是单独一行的话用flex布局还是很方便的，如果不是的话用上面其他办法更适合。
总结
关于使用哪一种方法都是可以选择的，但是第一种方法希望大家可以认真去思考下能收获很多关于内联元素对齐的知识。