中间对齐文本与 Font Awesome 图标

Question

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

但是，这是行不通的。有人可以帮忙吗？

<div>
    <span style="font-size: 17px !important; font-family: 'Francois One', sans-serif; color: #000000;">Rent single videos for .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>

Answer 1

要实现此功能，无论文本的字体大小如何，您都需要将 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 .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>

中间对齐文本与 Font Awesome 图标

Middle align text with Font Awesome icons

html

css

font-awesome