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

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

我怎么才能让这个起作用？

187079 次浏览
小开
最佳答案

有一个由 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

小开

或者，如果您使用引导程序，那么您可以只添加 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>
小开

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

小开

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>

提交答案