如何在 Bootstrap 按鈕中使用 Font Awesome 圖示垂直居中文字？

使用Font-Awesome 圖示垂直居中

有時，使用包含Font Awesome 圖示和文字的Bootstrap 按鈕時，對齊圖示與垂直圖示的文本可能具有挑戰性。通常，文字將與圖示的底部邊緣對齊，如 JSFiddle 範例所示。

要修正這種錯位，請避免修改文字的垂直對齊方式。相反，請調整 Font Awesome 圖示的垂直對齊方式。

內嵌樣式解決方案：

`

<i>

`

CSS 類別解決方案：

`.icon {

vertical-align: middle;
font-size: 40px;

}

.my-text {

font-family: "Courier-new";

}

.my-fancy-container {

...

}`

替代方法：

使用 icon-2x的替代方法是手動指定圖示的字體大小，如下所示在下面的程式碼中示範snippet:

<span>

`

`

此方法在控製圖示大小方面提供了更大的靈活性。請參閱更新後的 JSFiddle 以取得工作範例。

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