如何在 Bootstrap 按钮中垂直居中文本和字体精美的图标？

带有 Font-Awesome 图标的按钮中的垂直文本对齐

将大 Font-Awesome 图标与文本一起合并到引导按钮中时，文本往往与图标的底部边缘对齐，造成视觉上不平衡

解决方案

要使文本垂直居中，请重点对齐图标而不是文本。实现方法如下：

• 避免改变文本的垂直对齐。
• 使用 CSS 将 Font-Awesome 图标的垂直对齐属性设置为“middle”。 “

示例代码

<div>
  <span class="icon icon-2x icon-camera"><p><strong>替代方法</strong></p>
<p>要进行更多自定义，请考虑避免使用 icon-2x 类并手动指定字体大小。下面是一个示例：</p>
<pre class="brush:php;toolbar:false"><div class="my-fancy-container">
    <span class="my-icon icon-file-text"></span>
    <span class="my-text">Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

结论

通过调整 Font-Awesome 图标而不是文本的垂直对齐方式，可以有效地将字体居中按钮中图标旁边的垂直文本。这种方法在控制按钮内容的外观方面提供了更大的定制性和灵活性。