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

Question

在Bootstrap框架下，我尝试了很多方法来使字体Awesome图标与按钮中的文本垂直对齐，包括设置行高，但仍然无法解决问题。

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

我该如何让它工作？

- Shane

---

你可以简单地使用flex方法：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Ali Sohrabi

Answer 1

有一个由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/，输出结果如下：

- nickhar

---

如果您使用像“条形图”（广泛使用的移动导航按钮）这样的图标，仍然会在顶部留下一些空间，因此您可能还想添加margin-top: -0.125em。请注意保持原意，并使句子更加通俗易懂。 - cr0ybot

我曾经遇到过谷歌材料图标的类似问题，这个方法解决了它。 - John Crawford

对于那些设置了 style="height: x px;" 但仍然遇到垂直对齐问题的人，我发现改为设置 style="padding: y px;" 就可以解决问题（Bootstrap 4）。 - Ruben Flam-Shepherd

vertical-align: middle 在图标元素中起到了作用，谢谢！（在Bootstrap中只需添加align-middle类即可） - MikhailRatner

Answer 2

如果您使用的是Bootstrap，那么您可以只需添加 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>

- Ali Kazai

---

谢谢！但是我使用 align-top，因为 align-middle 不能使图标和文本处于同一水平线上。 - Nairum

Answer 3

在您的元素父级中添加类d-inline-flex align-items-center，即可使用Bootstrap 4.3.1。您还可以像这样使用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>

- Marcos Paolo

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

- kostjanix