对齐图标中心 div - CSS

在前端开发过程中，我们可能会遇到需要将一个图标与文本对齐，但是由于图标和文本大小不同，难以实现对齐的问题。此时，我们可以使用CSS中的div来实现将图标和文本对齐的效果。

实现对齐图标中心的方法

首先，需要在HTML中定义一个div元素，将其中的图标和文本分别放在两个span元素中，并使用CSS将它们居中对齐。

<div class="container">
  <span class="icon"><i class="fas fa-user"></i></span>
  <span class="text">用户名：</span>
</div>

接着，在CSS中设置container元素为relative布局，icon元素为absolute布局，同时使用transform将其翻译至竖直方向中央。

.container {
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

最后，为了防止文本和图标出现重叠的情况，需要设置text元素的左边距为icon元素的宽度。

.text {
  margin-left: 20px;
}

最终效果如下图所示：

总结

通过设置div元素和span元素的布局、样式，我们可以实现对齐图标中心的效果。这个方法非常实用，在实际开发中经常会用到，掌握了这个技巧可以提高我们的开发效率。