html - 垂直对齐按钮中的图标

Question

我对 HTML 和 CSS 比较陌生，我有以下困难，请看下面的 HTML:

<a href="#" class="arrow-btn">
       about us <i class="fa fa-arrow-right"></i>
</a> 

我有以下 CSS:

body {
    background: #000;
}
.arrow-btn {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    display: block;
    margin: 50px auto 50px auto;
    font-weight: 700;
}

.arrow-btn:focus , .arrow-btn:active , .arrow-btn:hover {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    display: block;
    margin: 50px auto 50px auto;
}

.arrow-btn > i {
    font-size: .8em;
}

.arrow-btn:hover > i ,  .arrow-btn:active > i ,  .arrow-btn:focus > i{
    -webkit-transition: transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    -webkit-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
}

我的困难在于垂直对齐。现在，由于我的 HTML 标记非常小，我不想使用 display:table 解决方案，因为那样需要额外的标记。理想情况下，我希望我的标记保持原样，现在请注意我已将以下 css 添加到 .arrow-btn i:

.arrow-btn > i {
    font-size: .8em;
}

那么如何将按钮中的文本与箭头垂直对齐呢？

fiddle here .

Answer 1

给图标一个 vertical-align 值并调整它的 line-height 以使其相对于标签位于您想要的位置。

Fiddle!