css 锚()标签内的文字垂直对齐< a>

au9on6nz 于 2022-11-27 发布在其他

关注(0)|答案(3)|浏览(193)

示例演示：JSFiddle

<h3><a class="myButton" href="#">Tell Me More &nbsp;&nbsp;<i class="fa fa-chevron-circle-right fa-2x"></i></a></h3>

正如您在我的JSFiddle中看到的，文本 Tell Me More 不是垂直居中对齐的。
我怎么能那样做呢？

3条答案

您应该使用新的CSS 3功能，在本例中为Flexbox。
第一个
事情就是这么简单。
所有浏览器都支持它。请访问caniuse.com/#search=flex。
也可以看看免费的优秀课程flexbox.io/，他是这方面最好的老师。
还可以查看CSS 3中的新功能css-grid。

Demo Fiddle
添加此CSS内容：

.fa
{
   vertical-align: middle;
}

.myButton {
    display: inline-block;
    vertical-align: middle;
}

.fa {
    vertical-align: middle;
}

哦，对不起，现在保证金工作，即使你把他们应用到.myButton。