这个问题在这里已有答案:
我有一个非常简单的情况,我似乎无法解决。我想将文本垂直居中到FontAwesome图标。但我不能为我的生活弄清楚为什么它不是中心。
我尝试了其他答案,但没有看到使用:在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>
只需使用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>