带有 FontAwesome 图标的中心文本

Question

我有一个非常简单的情况，我似乎无法解决。我想将文本垂直居中到 FontAwesome 图标。但是我一辈子都弄不明白为什么它不居中。

我尝试了其他答案，但 none 看到使用 :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>

Answer 1

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

#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>

Answer 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>

带有 FontAwesome 图标的中心文本

Center Text with FontAwesome Icon

html

css

vertical-alignment

font-awesome