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