嘿,伙计们,我对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!