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添加到<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图标的中心文本

2 个答案: