如何在 Bootstrap 按鈕中垂直居中文字和字體精美的圖示？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-12-13 16:02:10

原創

223 人瀏覽過

How to Vertically Center Text and Font-Awesome Icons in Bootstrap Buttons?

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

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

解決方案

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

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

範例程式碼

<div>
  <span class="icon icon-2x icon-camera">

登入後複製

替代方法

要進行更多自訂，替代方法

<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類別並手動指定字體大小。，可以有效地將字體居中按鈕中圖示旁的垂直文字。

以上是如何在 Bootstrap 按鈕中垂直居中文字和字體精美的圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！