css实现文本图标对齐的方法(2)-木庄网络博客

3、使用flex布局

1 2	`display: flex;` `align-items:` `center;`

不过就算是flex布局，有时候也会出现一点儿偏差，比如：图片尺寸为偶数、字体font-size为偶数，line-height为偶数时对齐；奇数时偏上1px。

4、使用ex单位

ex就是小写字母x的高度，可以用在不受字体和字号影响的内联元素的垂直居中对齐效果。

PS：不过这种适用于图标高度跟文字一致，比如字符后面加一个箭头（点击展开）的情况，就很实用。

.wrap img {
    height: 1ex;
}

5、vertical-align 数值方式的使用

vertical-align 属性值可以使用数值型和百分比值，如，还是上面的基本案列：如果图片高度是20px，文字font-size为22px时，默认对齐是文字的基线，那么图片会偏上2px，这时只需要将图片向下偏移2px，就能实现对齐效果，而且 vertical-align 这个属性的数值型具有很好的兼容性。

.wrap {
            width: 100%;
            padding-top: 200px;
            text-align: center;
            margin: 20px auto;
            font-size: 22px;
            height: 40px;
             
        }
        .wrap img {
            width: 20px;
            vertical-align: -2px;
        }