嘿,伙计们,我对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
谢谢您。
亚历克斯-Z。

最佳答案

给图标一个vertical-align值,并将其line-height调整为相对于标签的位置。
Fiddle!

07-28 03:42
查看更多