我有一个非常简单的情况，我似乎无法解决。我想将文本垂直居中到 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>您需要将其应用于元素本身，而不是添加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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句