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

Question

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

我怎样才能让这个工作？

Answer 1

只需将按钮标签包装在一个额外的跨度中，并将class="line-mid"添加到两者（图标和标签）。这将使您的图标以垂直文本居中。

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

Answer 2

或者，如果您使用bootstrap，那么您只需添加alian-mid即可垂直对齐元素。

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

Answer 3

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

您应该在CSS文件中设置覆盖，而不是内联，但实际上，icon ok类被设置为垂直对齐：基线 默认情况下，我已在此处更正：

<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，因为对于按钮的大小来说，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/其输出为：