记录文本图标对齐的几种解决方案

常见的对齐问题：

1. 浏览器是基于什么对齐图标和文本的？
2. 为何明明使用了 flex或vertical-align，图标仍是看起来差了 1 像素没对齐？

文字图标布局

开发中碰见图片跟文字放在一行显示是最多见不过的了，两个行内元素的对齐一般也是最使人头疼，有时候明明使用了最经常使用的对齐方法，却总仍是有些许误差，先来看一个最基本的示例：

html部分：

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xx测试对齐Style-
</div>
复制代码

css部分：

.wrap {
      width: 300px;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
 }
 .wrap img {
      width: 20px;
 }
复制代码

未使用对齐方式的效果以下：

默认的对齐方式是baseline，也就是x字母的最下面那条线。

这也就回答了第一个问题，浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准，也就是vertical-align:baseline;。

怎么让图片跟文字居中对齐呢，下面来看几种常见的解决方案。

常见的几种居中方案

一、使用vertical-align 居中对齐方式

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}
复制代码

当咱们使用经常使用的vertical-align对齐文本和图片时，其实也是有必定的误差的，以下图：

vertical-align的middle值其实是相对于小写字母x的一半高度来讲的，因此图片会跟x的中间开始对齐，可是其余字符譬如S、中文，就会发现不管如何都会出现稍许误差，图片会相对而言偏下。

二、使用vertical-align 同时使用span包裹文本

让咱们再稍作改变，将文本部分使用span标签包裹，而且对span使用vertical-align: middle;样式对齐。会发现此时图片会上移少量。 效果以下：

其实严格来讲，第一种方式不算是真正的彻底发挥了vertical-align的做用，我经常按第一种方式来实现对齐效果，由于懒得再写一层span标签，但实际上咱们能够再尝试把vertical-align: middle;去掉，会发现跟只在img标签上使用vertical-align: middle;的效果是同样的，也就是说，外层的div上设置vertical-align并无做用。

这是由于，vertical-align起做用是有前提条件的，只能应用于内联元素以及display值为tabale-cell的元素，且vertical-align不可继承。

三、使用flex布局

display: flex;
align-items: center;
复制代码

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

具体参考可查看 iconSize、fontSize 和 lineHeight 之间奇偶关系 对齐偏差

四、使用ex单位

这种方式是从张鑫旭老师的《css世界》中看到的，ex就是小写字母x的高度，能够用在不受字体和字号影响的内联元素的垂直居中对齐效果，PS：不过这种适用于图标高度跟文字一致，好比字符后面加一个箭头（点击展开）的状况，就很实用。

.wrap img {
    height: 1ex;
}
复制代码

​

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

一样也是在张鑫旭老师的《css世界》中看到的，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;
        }
复制代码