图标文字对齐的几种常见方法

引言

图标文字对齐在平时的工作中是最常见的了，最早学习时候一般都是用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;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  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元素内没有内联元素则其基线是margin底边缘，这样和文字对齐时候就会有上下交错导致行框的高度都增高了，既然这样我们只要让i元素基线和文字基线一致就能保证和文字对齐了，方案就是在其中包含文字同时文字又不显示出来：

.icon {
  display: inline-block;
  width: 20px;
  height: 20px; //等于行高
  text-indent: -9999em; //隐藏文字
  white-space: nowrap;
}
.icon::before {
  content: 'icon';
}
.icon-info {
  background: url(./info-circle.png) no-repeat center;
}

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

绝对定位法

说到绝对定位的方法大家肯定都会了，给button元素设置relative，然后图标绝对定位：

.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:inline-flex;align-items: center;即可。

总结

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