html - 中间将文字与Font Awesome图标对齐

我想使用内联样式使文本与Font Awesome图标对齐。

但是，这不起作用。有人可以帮忙吗？

<div>
    <span style="font-size: 17px !important; font-family: 'Francois One', sans-serif; color: #000000;">Rent single videos for $1.00 with Credit Card, Bitcoin or PayPal</span>
    <span class="fa fa-cc-mastercard  fa-3x" style=" vertical-align: middle;"></span>
    <span class="fa fa-cc-visa fa-3x" style=" vertical-align: middle;"></span>
    <span class="fa fa-btc fa-3x" style=" vertical-align: middle;"></span>
    <span class="fa fa-cc-paypal fa-3x" style=" vertical-align: middle;"></span>
</div>

最佳答案

为了使此工作有效，无论文本的字体大小如何，都需要在第一个跨度中添加vertical-align: middle;：

<div>
    <span style="font-size: 17px !important; font-family: 'Francois One', sans-serif; color: #000000; vertical-align: middle;">Rent single videos for $1.00 with Credit Card, Bitcoin or PayPal</span>
    <span class="fa fa-cc-mastercard  fa-3x" style=" vertical-align: middle;"></span>
    <span class="fa fa-cc-visa fa-3x" style=" vertical-align: middle;"></span>
    <span class="fa fa-btc fa-3x" style=" vertical-align: middle;"></span>
    <span class="fa fa-cc-paypal fa-3x" style=" vertical-align: middle;"></span>
</div>