CSS 如何在大型字体图标中垂直居中文本

在本文中，我们将介绍如何使用CSS在一个带有大型字体图标的元素中实现文本的垂直居中。

阅读更多：CSS 教程

使用Flexbox实现垂直居中

Flexbox是CSS中用于布局的强大工具之一。通过使用Flexbox，我们可以轻松地实现垂直居中效果。以下是一种将文本垂直居中的简单方法：

<div class="container">
  <i class="fas fa-heart"></i>
  <span class="text">收藏</span>
</div>

.container {
  display: flex;
  align-items: center;
}

.text {
  margin-left: 10px;
}

在上面的示例中，我们使用了一个包含一个大型字体图标和一个文本的容器。通过将容器的display属性设置为flex，并将align-items属性设置为center，我们可以将容器中的所有元素水平和垂直居中。我们还使用margin-left属性对文本进行了一些微调，以使其与图标分离。

使用行高实现垂直居中

除了使用Flexbox布局，我们还可以使用行高（line-height）来实现文本的垂直居中。以下是另一种实现的示例：

<div class="container">
  <i class="fas fa-heart"></i>
  <span class="text">收藏</span>
</div>

.container {
  line-height: 50px;
}

.text {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

在上面的示例中，我们通过将容器的line-height属性设置为与容器高度相同的值来实现文本的垂直居中。我们还将文本的display属性设置为inline-block，以便让vertical-align属性生效。通过将vertical-align属性设置为middle，我们可以将文本垂直居中。同样，我们使用margin-left属性对文本进行了微调。

使用绝对定位实现垂直居中

如果我们想要更精确地控制文本的位置，我们可以使用绝对定位来实现垂直居中。以下是一个使用绝对定位的示例：

<div class="container">
  <i class="fas fa-heart"></i>
  <span class="text">收藏</span>
</div>

.container {
  position: relative;
  height: 50px;
}

.text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
}

在上面的示例中，我们首先将容器的position属性设置为relative，以便我们可以在其中使用绝对定位。然后，我们通过设置文本的position属性为absolute，top属性为50%，以及transform的translateY(-50%)来实现文本的垂直居中。我们还使用left属性对文本进行了一些微调。