引导按钮中的文本和图标的垂直对齐

我在引导框架下的按钮内的文本垂直对齐字体真棒图标时遇到问题。我尝试了很多东西，包括设置行高，但没有任何工作。引导按钮中的文本和图标的垂直对齐

<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有类似的问题，并解决了这个问题。 –

引导按钮中的文本和图标的垂直对齐

回答

相关问题