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

时间:2013-07-04 22:14:33

标签: twitter-bootstrap alignment webfonts font-awesome

我无法在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/

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

4 个答案:

答案 0 :(得分:85)

有一条规则由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/,其输出为:

enter image description here

我已将此实例中上方图标的字体大小缩小为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/输出为:

enter image description here

答案 1 :(得分:0)

或者,如果您使用引导程序,则只需添加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>

答案 2 :(得分:0)

只需将按钮标签包裹在一个额外的范围内,然后将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>

答案 3 :(得分:0)

Bootstrap 4.3.1 只是在你的元素父元素中添加类 d-inline-flex align-items-center,你也可以使用 my-0 去除字体很棒的图标中的多余边距,如下所示:

<a href="" class="btn btn-success d-inline-flex align-items-center"><i class="fab fa-whatsapp h1 my-0 pr-2"></i>Whatsapp</a>