78

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

4 回答 4

129

有一个由 设置的规则，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/，其输出为：

在此处输入图像描述

在本例中，我已将上面图标的字体大小缩小为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/其输出为：

在此处输入图像描述

于 2013-07-05T00:30:35.483 回答
16

或者，如果您使用引导程序，那么您可以添加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>
于 2018-12-24T00:12:39.517 回答
4

只需将按钮标签包装在一个额外的跨度中并添加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>

于 2019-09-23T12:52:52.013 回答
2

Bootstrap 4.3.1 只需d-inline-flex align-items-center在你的元素父级中添加类，你也可以使用它my-0来删除 font-awesome 图标中的多余边距，如下所示：

<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>
于 2021-07-14T18:03:28.633 回答