CSS 在按钮中居中 Twitter Bootstrap 3 的 Glyphicons

在本文中，我们将介绍如何在按钮中居中显示 Twitter Bootstrap 3 的 Glyphicons。Glyphicons 是一组用于创建网页图标的字体，它在 Bootstrap 框架中被广泛使用。

阅读更多：CSS 教程

1. 使用内联样式

我们可以通过在 HTML 按钮元素中使用内联样式来实现 Glyphicons 的居中显示。我们可以添加一个 span 元素作为 Glyphicons 的容器，并设置它的样式为居中。

<button class="btn btn-primary">
  <span class="glyphicon glyphicon-home" style="vertical-align: middle;"></span>
  Home
</button>

在上面的示例中，我们创建了一个带有 Home 文本和 Glyphicons 图标的按钮。我们使用内联样式将 Glyphicons 图标垂直居中。 vertical-align: middle; 样式可以使图标相对于文本在垂直方向上居中。

2. 使用自定义样式类

除了使用内联样式，我们还可以使用自定义样式类来实现 Glyphicons 的居中显示。我们可以在样式表中定义一个新的样式类，并将其应用于按钮元素。

首先，我们需要在 HTML 文档头部引入 Bootstrap 的样式表：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

然后，我们可以在样式表中定义一个自定义样式类：

.center-glyphicon {
  display: inline-block;
  vertical-align: middle;
}

接下来，我们将样式类应用于按钮元素：

<button class="btn btn-primary">
  <span class="glyphicon glyphicon-home center-glyphicon"></span>
  Home
</button>

上述示例代码中，我们在 span 元素上应用了 center-glyphicon 样式类，并使用 glyphicon glyphicon-home 类表示 Glyphicons 的图标。

3. 使用 Flexbox 布局

Flexbox 是一种强大的 CSS 布局模型，它可以轻松实现元素的居中对齐。我们可以使用 Flexbox 布局来实现 Glyphicons 在按钮中的居中显示。

首先，我们需要在按钮样式中设置 Flexbox 布局的容器样式：

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

上述代码中，我们使用 display: flex; 将按钮元素的显示模式设置为 Flexbox 布局。然后，我们使用 justify-content: center; 和 align-items: center; 将元素在水平和垂直方向上居中对齐。

然后，我们可以创建一个带有 Glyphicons 图标的按钮：

<button class="btn btn-primary">
  <span class="glyphicon glyphicon-home"></span>
  Home
</button>

通过设置按钮的样式为 .btn，Flexbox 布局将使 Glyphicons 图标在按钮中居中显示。

总结

本文介绍了如何使用 CSS 实现 Glyphicons 在按钮中的居中显示。我们可以通过内联样式、自定义样式类或使用 Flexbox 布局来实现这一效果。根据个人的需求和喜好，选择合适的方法来实现 Glyphicons 的居中显示。通过这些方法，我们可以更好地创建美观的按钮并提升用户体验。