由於font-family引起的垂直對齊問題

我正面臨文本在垂直方向上垂下標籤的問題。這個問題特別針對Open Sans谷歌字體。 Arial和其他字體似乎工作正常。不知道這是什麼問題。由於font-family引起的垂直對齊問題

請在這裏找到的jsfiddle： https://jsfiddle.net/or7nkyts/3/

第一個按鈕具有開放SAN和第二一個具有Arial字體家族。

任何幫助表示讚賞。

<a target="_blank" href="javascript:void(0)" class="btn testClass"> 
    <i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i> 
    <span style="vertical-align: middle;">Blue Button</span> 
</a> 
<a target="_blank" style="font-family: Arial;" href="javascript:void(0)" class="btn testClass"> 
    <i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i> 
    <span style="vertical-align: middle;">Blue Button</span> 
</a>

來源

2017-09-14 Trimantra Software Solution

哪些瀏覽器您使用？ – Winter

嘗試通過使用中心而不是風格中間。 – Tiya

'vertical-align：middle'是正確的 – Winter

我認爲這是因爲字體是如何製作的，除了使用css來處理它之外，你可以做的很少。

如果您在span上爲按鈕文本添加邊框，您將看到該字體本身在頂部比底部具有更大的邊距，並且它實際上與圖標中間對齊。

a.testClass span { 
    border: 1px solid red; 
}

下面是可能會爲你工作更好的解決方案：

https://jsfiddle.net/32cLkm5x/2/

來源

2017-09-14 11:36:55 Winter

感謝您的回答。但在我的情況問題是，我有這種情況下在頁面生成器應用程序，用戶可以設置按鈕的字體，字體大小，填充，邊距和邊框。他們還可以管理圖標的字體大小。所以一般來說很難添加這樣的修復。 –

由於font-family引起的垂直對齊問題

回答

相關問題