在引导按钮文本和图标的垂直对齐

在引导按钮文本和图标的垂直对齐

本文介绍了在引导按钮文本和图标的垂直对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我无法自举框架下垂直排列在一个按钮,文本字体真棒图标。我试过这么多的事情,包括设置行高,但没有什么工作。

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

推荐答案

有一个规则是由设置字体awesome.css ,你需要重写。

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

您应该设置覆盖在你的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:

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

我已经缩小图标上面的字体大小在这种情况下,以 30像素,因为它感觉太大的 40PX 为按钮的大小,但是这纯粹是个人观点。你可以增加填料上的按钮,如果需要补偿:

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>

生产: http://jsfiddle.net/fPXFY/5/其中的输出是:

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

08-04 01:27