css 图标和文字对齐 —— 垂直居中对齐，任意位置对齐

造成图标和文字排版困难的原因

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 可将图标调整至任意想要的位置。