造成图标和文字排版困难的原因
1. 图标本身并不居中
2. 目标图标大小和文本大小/行高不匹配
解决方案
1. 使用 “子绝父相” 的css定位方法，将图标设置为绝对定位，通过 left 和 top 按需自由调整图标的位置
2. 使用 flex 垂直居中布局
参考范例代码如下：
<div style="display: flex;align-items: center;border: 1px solid gray;padding: 10px"> <div style="position: relative;width: 30px"> <i style="position: absolute;top:-8px;left: 6px" class='iconfont icon-iconfontplus'></i> </div> <div>添加</div> </div>
通过调整 width 、top 和 left 可将图标调整至任意想要的位置。
