文本和图标在引导button中垂直alignment

我无法在引导框架下的button内垂直alignment字体超赞的图标和文本。 我已经尝试了很多东西,包括设置行高,但没有任何工作。

<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/

我怎样才能得到这个工作?

有一个规则是由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/和输出是:

在这里输入图像说明

在这个例子中,我把上面图标的字体大小缩小到了30px ,因为button的大小对于40px来说太大了,但这纯粹是个人的观点。 如果需要,您可以增加button上的填充以补偿:

 <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/其输出是:

在这里输入图像说明