引導按鈕中的文本和圖標的垂直對齊

我在引導框架下的按鈕內的文本垂直對齊字體真棒圖標時遇到問題。我嘗試了很多東西，包括設置行高，但沒有任何工作。引導按鈕中的文本和圖標的垂直對齊

<button id="edit-listing-form-house_Continue" 
     class="btn btn-large btn-primary" 
     style="" 
     value="" 
     name="Continue" 
     type="submit"> 
    Continue 
    <i class="icon-ok" style="font-size:40px;"></i> 
</button>

http://jsfiddle.net/fPXFY/

我怎樣才能得到這個工作？

來源

2013-07-04 Shane

有一個規則由font-awesome.css設置，您需要覆蓋該規則。

您應該設置覆蓋在你的CSS文件，而不是內聯，但本質上，圖標，確定類被默認設置爲vertical-align: baseline;和我在這裏更正：

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit"> 
    <span>Continue</span> 
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> 
</button>

這裏的例子：http://jsfiddle.net/fPXFY/4/且其輸出是：

enter image description here

我已經縮小圖標上面的字體大小在這種情況下，以30px，因爲感覺在太大爲按鈕的大小，但這純粹是個人觀點。你可以增加襯墊上的按鈕，以補償如果需要的話：

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit"> 
    <span>Continue</span> 
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> 
</button>

生產：http://jsfiddle.net/fPXFY/5/其輸出是：

enter image description here

來源

2013-07-05 00:30:35 nickhar

+10

您可能還需要增加'的margin-top：-0.125 em'，因爲我發現如果使用像「bars」（無處不在的移動導航按鈕）這樣的圖標，頂部還是有一些空間。 – cr0ybot

與Google Material Icons有類似的問題，並解決了這個問題。 –

引導按鈕中的文本和圖標的垂直對齊

回答

相關問題