如何在 Bootstrap 按钮中使用 Font Awesome 图标垂直居中文本？

使用 Font-Awesome 图标垂直居中

有时，在使用包含 Font Awesome 图标和文本的 Bootstrap 按钮时，对齐与图标垂直的文本可能具有挑战性。通常，文本将与图标的底部边缘对齐，如 JSFiddle 示例所示。

要纠正这种错位，请避免修改文本的垂直对齐方式。相反，请调整 Font Awesome 图标的垂直对齐方式。

内嵌样式解决方案：

`

<i>

`

CSS 类解决方案：

`.icon {

vertical-align: middle;
font-size: 40px;

}

.my-text {

font-family: "Courier-new";

}

.my-fancy-container {

...

}`

替代方法：

使用 icon-2x 的替代方法是手动指定图标的字体大小，如下所示在下面的代码中演示snippet:

`

<span>

</div>`

此方法在控制图标大小方面提供了更大的灵活性。请参阅更新后的 JSFiddle 以获取工作示例。

以上是如何在 Bootstrap 按钮中使用 Font Awesome 图标垂直居中文本？的详细内容。更多信息请关注PHP中文网其他相关文章！