按钮中文本和图标的垂直对齐 [英] Vertical alignment of text and icon in button

问题描述

我在Bootstrap框架下的按钮内将字体真棒图标与文本垂直对齐遇到麻烦。我已经尝试了很多事情，包括设置行高，但没有任何效果。

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

输出为：

I'm having trouble vertically aligning a font-awesome icon with text within a button under the Bootstrap framework. I've tried so many things including setting the line-height, but nothing is working.

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

How can I get this to work?

解决方案

There is one rule that is set by font-awesome.css, which you need to override.

You should set overrides in your CSS files rather than inline, but essentially, the icon-ok class is being set to vertical-align: baseline; by default and which I've corrected here:

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

Example here: http://jsfiddle.net/fPXFY/4/ and the output of which is:

I've downsized the font-size of the icon above in this instance to 30px, as it feels too big at 40px for the size of the button, but this is purely a personal viewpoint. You could increase the padding on the button to compensate if required:

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

Producing: http://jsfiddle.net/fPXFY/5/ the output of which is:

这篇关于按钮中文本和图标的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！