首頁 > web前端 > css教學 > 如何在 Bootstrap 按鈕中垂直居中文字和字體精美的圖示?

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

Linda Hamilton
發布: 2024-12-13 16:02:10
原創
292 人瀏覽過

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

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

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

解決方案

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

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

範例程式碼

1

2

<div>

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

登入後複製

替代方法

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

1

2

3

4

<div class='my-fancy-container'>

    <span class='my-icon icon-file-text'></span>

    <span class='my-text'>Hello World</span>

</div>

登入後複製

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

.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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板