带FontAwesome图标的文本居中[重复]

Question

我有一个很简单的情况，我似乎无法解决。我想将文本垂直居中到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>

Answer 1

不需要将vertical-align:middle添加到元素，而是需要将其应用到: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>