twitter-bootstrap 按钮中文本和图标的垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17478710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical alignment of text and icon in button
提问by Shane
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.
我在 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>
How can I get this to work?
我怎样才能让它工作？
回答by nickhar
There is one rule that is set by font-awesome.css, which you need to override.
有一个由 设置的规则，font-awesome.css您需要覆盖它。
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:
您应该在 CSS 文件中设置覆盖而不是内联，但本质上，vertical-align: baseline;默认情况下设置了 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>
Example here: http://jsfiddle.net/fPXFY/4/and the output of which is:
此处示例：http: //jsfiddle.net/fPXFY/4/其输出为：
I've downsized the font-size of the icon above in this instance to 30px, as it feels too big at 40pxfor the size of the button, but this is purely a personal viewpoint. You could increase the padding on the button to compensate if required:
在这个例子中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>
Producing: http://jsfiddle.net/fPXFY/5/the output of which is:
制作：http: //jsfiddle.net/fPXFY/5/其输出为：
回答by Ali Kazai
Alternativly if your using bootstrap then you can just add align-middleto vertical align the element.
或者，如果您使用引导程序，那么您可以添加align-middle垂直对齐元素。
<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>
回答by kostjanix
Just wrap the button label in an extra span and add class="align-middle"to both (the icon and the label). This will center your icon with text vertical.
只需将按钮标签包装在额外的跨度中并添加class="align-middle"到两者（图标和标签）。这将使您的图标与文本垂直居中。
<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>
