带有 FontAwesome 图标的中心文本 [重复]答案

【问题标题】：Center Text with FontAwesome Icon [duplicate]带有 FontAwesome 图标的中心文本 [重复]
【发布时间】：2019-07-18 10:12:52
【问题描述】：

我有一个非常简单的情况，我似乎无法解决。我想将文本垂直居中到 FontAwesome 图标。但我终其一生都无法弄清楚为什么它没有居中。

我尝试了其他答案，但没有看到使用 :before CSS 定义，这是一种非常受欢迎的实现图标的方式。

这是我的代码：

#rk-lesson-menu {
    display: inline-block;
    width: 100px;
    height: 60px;
    float: right;
    text-align: center;
    border-left: 1px solid #DDD;
    line-height: 60px;
    vertical-align: middle;
    text-decoration:none
}
#rk-lesson-menu:before {
    font: 28px/60px fontawesome;
    content: "\f0c9";
    padding-right: 3px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a id="rk-lesson-menu" class="rk-menu" href="">MENU</a>

【问题讨论】：

@Temani Afif 这不是一个重复的问题。您可以在您引用的问题中清楚地看到，图像或图标正在以另一种方式显示，没有人在 CSS 定义之前使用 :，因此该问题是独一无二的，并且可以使其他用户受益。
所以考虑到你的逻辑，如果其他人问同样的问题并使用:after 而不是:before 那么它也会是一个不同的问题吗？不，它将保持与此相同的副本，并且您可以从您接受的答案中清楚地看到解决方案是相同的，这使其成为完美的副本。我们不会根据代码来判断重复，而是根据主要问题来判断。您想将文本与图标/图像垂直对齐，并且解决方案与您编写它的方式相同->“您需要将垂直对齐应用于图标”
来自重复的问题：do not play with the vertical-align of your text play with the vertical align of the font-awesome icon。与如何添加 font-awesome 无关，因此该解决方案将适用于 span/div/:before/:after。等等...还请注意，您的问题已关闭且未删除，因此用户仍然可以看到它并且它可以使其他用户受益

标签： html css font-awesome vertical-alignment

【解决方案1】：

您需要将其应用于:before 元素本身，而不是将vertical-align: middle 添加到<a> 元素：

#rk-lesson-menu {
  display: inline-block;
  width: 100px;
  height: 60px;
  float: right;
  text-align: center;
  border-left: 1px solid #DDD;
  line-height: 60px;
  text-decoration: none;
}

#rk-lesson-menu:before {
  font: 28px/60px fontawesome;
  content: "\f0c9";
  padding-right: 3px;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<a id="rk-lesson-menu" class="rk-menu" href="">MENU</a>

【讨论】：

完美。奇迹般有效。不敢相信我之前没有尝试过。

【解决方案2】：

只需使用 flexbox 并添加 align-items: center 和 justify-content: center。

这样您就不需要定义vertical-align、line-height 或text-align。

#rk-lesson-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 60px;
    float: right;
    border-left: 1px solid #DDD;
    text-decoration:none
}
#rk-lesson-menu:before {
    font: 28px/60px fontawesome;
    content: "\f0c9";
    padding-right: 3px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a id="rk-lesson-menu" class="rk-menu" href="">MENU</a>

【讨论】：