如何在 Bootstrap 按鈕中垂直居中文字和字體精美的圖示？

帶有 Font-Awesome 圖示的按鈕中的垂直文字對齊

將大 Font-Awesome當圖示與文字一起合併到引導按鈕中時，文字往往與圖示的底部邊緣對齊，造成視覺上不平衡

解決方案

要讓文字垂直居中，請重點對齊圖標而不是文字。實作方法如下：

• 避免改變文字的垂直對齊。
• 使用 CSS 將 Font-Awesome 圖示的垂直對齊屬性設為「middle」。 「

範例程式碼

<div>
  <span class="icon icon-2x icon-camera"><p><strong>替代方法</strong></p>
<p>要進行更多自訂，替代方法</p>
<pre class="brush:php;toolbar:false"><div class="my-fancy-container">
    <span class="my-icon icon-file-text"></span>
    <span class="my-text">Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

請考慮更多自訂，請考慮避免使用icon-2x類別並手動指定字體大小。 ，可以有效地將字體居中按鈕中圖示旁的垂直文字。