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

我无法将字体精美的图标与 Bootstrap 框架下按钮内的文本垂直对齐。我尝试了很多方法，包括设置行高，但没有任何效果。

<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/ http://jsfiddle.net/fPXFY/

我怎样才能让它发挥作用？

有一条规则是由font-awesome.css，您需要覆盖它。

您应该在 CSS 文件中设置覆盖而不是内联，但本质上， icon-ok 类被设置为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/ http://jsfiddle.net/fPXFY/4/其输出为：

在本例中，我已将上面图标的字体大小缩小为30px，因为感觉太大了40px对于按钮的大小，但这纯粹是个人观点。如果需要，您可以增加按钮上的填充以进行补偿：

<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/ http://jsfiddle.net/fPXFY/5/其输出是：