css图标文字居中对齐的几种方法

引言

图标文字对齐在平时的工作中是最常见的了，最早学习时候一般都是用vertical-align，但是由于inline-block元素在和文字对齐时候的一些很麻烦的表现，大家应该都经历过那种行框高度高出几px的情形。简单暴力的话还可以用absolute定位方法。flex布局出现以后很多时候用flex的居中对齐也是很方便的。

实现

下面就以实现下面这个按钮的样式总结下几种方法：

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.btn:hover, .btn:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}

<button class="btn"><i class="icon icon-info"></i> warning</button>
复制代码

inline-block文字基线对齐法

思路很简单，要让图标和文字对齐，就让i图标高度和和文字行高一致并且是对齐，然后图标背景居中就可以了，问题在于inline-block元素内没有内联元素或者overflow不是visible则其基线是margin底边缘（参考），这样和文字对齐时候就会有上下交错导致行框的高度都增高了，既然这样我们只要让i图标基线和文字基线一致就能保证和文字对齐了，方案就是在其中包含文字同时文字又不显示出来：

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-indent: -9999em;
  white-space: nowrap;
}
.icon::before {
  content: 'icon';
}
.icon-info {
  background: url(https://raw.githubusercontent.com/lijie33402/picGo/main/20210525230657.svg) no-repeat 	center;
}
复制代码

用元素插入文字，用一个很大的text-indent来隐藏文字就可以达到想要的效果了。

ex对齐法

同上一个方法相似，css中有一个ex的单位，内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。假如我们图标高度就是1ex, 同时背景图片居中，完全不受字体和字号的影响。因为ex就是一个相对于字体字号的单位。(参考)

.icon {
  display: inline-block;
  width: 20px;
  height: 1ex;
}
.icon-info {
  background: url(https://raw.githubusercontent.com/lijie33402/picGo/main/20210525230657.svg) no-repeat 	center;
  background-size: contain;
}
复制代码

这里加个background-size: contain;保证图标的自适应，由于这里高度是1ex，所以图标高度是比较小的，适合收缩展开小三角图标。

绝对定位法

说到绝对定位的方法就比较简单了，给button元素设置一个较大的padding-left，postion设置为relative，然后图标绝对定位，这里icon绝对定位还可以使用伪元素。

.btn {
  ...
  position: relative;
  padding-left: 32px;
}

.icon {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 12px;
}
复制代码

如果上层元素没有影响absolute的定位，其实可以省去button的相对定位，直接使用无依赖绝对定位即可，用margin-left调整位置：

.btn {
  ...
  padding-left: 32px;
}
.icon {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -20px;
}

复制代码

flex布局法

这个直接给button设置display:flex;align-items: center;即可，但是button变为块级元素，可以考虑使用inline-flex，但是可能需要处理与其他元素对齐的问题，因此如果按钮是单独一行的话用flex布局还是很方便的，如果不是的话用上面其他办法更适合。

总结

关于使用哪一种方法都是可以选择的，但是第一种方法希望大家可以认真去思考下能收获很多关于内联元素对齐的知识。