图标和字体对齐的几种方法

图标和字体对齐的几种方法

原因

转述
文字图片默认都是以baseline展示的，也称为基线对齐，也就是根据vertical-align属性。如下所示：我们还可以看到图片下面还有一部分空白的高度，此高度是由于字体line-height属性撑出来的，如果没有以下文本元素，自然也不会有以下的空白的高度。

但是文字基线不是最低部，而是x的底部。下面的图可以很形象的描述

补充一个知识点：X-height属性：指的的是小写字母x的高度，进而引申出一个单位“ex”。 ex是CSS中的一个相对单位，可以应用在图标跟文字高度一致的时候。1ex就是一个x的高度。设想下，假如我们图标高度就是1ex, 同时背景图片居中，岂不是图标和文字天然垂直居中，而且，完全不受字体和字号的影响。因为ex就是一个相对于字体字号的单位。

CSS中有些属性值的定义就和这个"x-height"的有关，最典型的代表就是：vertical-align: middle.

这里的middle是中间的意思，注意，跟上面的median中线不是一个意思。规范中对垂直对齐的middle这么解释的：

middle: This identifies a baseline that is offset from the alphabetic baseline in the shift-direction by 1/2 the value of the x-height font characteristic. The position of this baseline may be obtained from the font data or, for fonts that have a font characteristic for “x-height”, it may be computed using 1/2 the “x-height”. Lacking either of these pieces of information, the position of this baseline may be approximated by the “central” baseline.

大意就是：middle指的是基线往上1/2 "x-height"高度。我们可以近似脑补成字母x交叉点那个位置。

有此可见，vertical-align: middle并不是绝对的垂直居中对齐，我们平常看到的middle效果只是一种近似的效果。原因很简单，因为不同的字体，其在行内盒子中的位置是不一样的，比方说’微软雅黑’就是一个字符下沉比较明显的字体，所有字符的位置相比其他字体要偏下一点。要是vertical-align: middle是相对容器中分线对齐，呵呵，你会发现图标和文字不在一条线上，而相对于字符x的中心位置对齐，我们肉眼看上去就好像和文字居中对齐了。

方法

在此之前定义html

<div class="wrap">
   <img class="img" src="../../image/blue.png">
   sad文字xxx
</div>

1. 使用vertical-align 居中对齐方式

.wrap {
   vertical-align: middle;
   }
.wrap img {
   vertical-align: middle;
}

2. 使用vertical-align 同时使用span包裹文本

vertical-align起作用是有前提条件的，只能应用于内联元素以及display值为tabale-cell的元素，且vertical-align不可继承。所以需要进行包裹

3. 使用flex布局

display: flex;
align-items: center;

这是我平时使用最多的方式，也是能够大部分情况的问题

4. 使用ex单位

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

.wrap img {
    height: 1ex;
}

也就是刚刚前面所说的

5. 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;
}