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

Posted 2023-03-05

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

【英文标题】：Vertical alignment of text and icon in button

【发布时间】：2013-07-02 22:57:09

【问题描述】：

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

我怎样才能让它工作？

【问题讨论】：

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

【参考方案1】：

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>

【参考方案2】：

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

如果您使用引导程序，则可以添加 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>

【讨论】：

谢谢！但我使用align-top，因为align-middle 不会在同一级别上制作图标和文本。

【参考方案4】：

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/ 其输出为：

【讨论】：

您可能还想添加margin-top: -0.125em，因为我发现如果您使用“栏”之类的图标（无处不在的移动导航按钮），顶部仍有一些空间。跨度>

Google Material Icons 遇到了类似的问题，这解决了它。

对于那些设置style="height: x px;" 并且仍在为垂直对齐问题而苦苦挣扎的人。我发现设置 style="padding: y px;" 可以解决问题（Bootstrap 4）