45

我现在正在使用 Twitter Bootstrap 3 RC2 以及已移至单独存储库的 Twitter Bootstrap。我注意到，如果在带有文本的按钮中使用该图标，则该图标不会很好地居中：

在此处输入图像描述

图标和文本具有相同的底线，但我相信对于一个好看的按钮，图标应该基于文本居中，不是吗？知道如何实现这一目标吗？

http://bootply.com/74652

4

10 回答 10

58

使用字形图标将文本移出<span>并vertical-align: middle;应用于<span>

  <button class="btn btn-default">
    <span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
  </button>

演示

这适用于带有 Font Awesome 图标的 Bootstrap 4

<button class="btn btn-default" style="vertical-align: middle;">
    <i class="fa fa-times"></i> Centered
</button>
于 2013-08-16T13:10:18.500 回答
27

在 .glyphicon-th 上应用vertical-align: -{N}px;样式以向上/向下移动 N 个像素。

于 2013-08-16T13:10:34.860 回答
3

对于某些垂直对齐可能由于定位而无法工作：如果您查看 .glyphicon 类，您会看到它设置为相对，请尝试将其设置为“继承”，例如：

.glyphicon.v-centered {
    position: inherit;
    vertical-align: middle;
}

这也适用于不在按钮中的图标，例如选项卡。

于 2016-04-08T13:33:59.357 回答
1

试穿vertical-align: middle;_.glyphicon-th:before

于 2013-08-16T12:56:06.817 回答
1

上面的方法都没有对我自己很好，但是display: inline-block; vertical-align: middle在元素上使用可以。这inline-block似乎是关键。

.vcenter * {
    vertical-align: middle;
    display: inline-block;
}

.btn i {
    margin-left: 10px;
    font-size: 20px;
}

和

<div class="vcenter">
  <button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>

有关实时示例，请参见http://www.bootply.com/UbY78zM8pD。

于 2014-07-10T15:35:49.590 回答
1

我设法这样做：

.glyphicon.center:before {
    vertical-align: middle;
}

并使用<span class="glyphicon center glyphicon-th"></span>.

于 2015-05-17T18:06:25.057 回答
1

问题：字形图标在按钮文本上方高出 2 px。使用此处的示例将其修复如下。谢谢（阿拉斯泰尔·莫）。

我设法让我的工作如下：

HTML

<div class="col-xs-12">
    <a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
        <span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
    </a>
</div>

CSS

#panelTopic  .glyph_Credit {
    vertical-align: middle;
    display: inline-block;
    padding-bottom:6px;
}
于 2018-01-18T21:02:06.070 回答
0 
<button class="btn btn-default">
          <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
          <span style="font-size: 17px;">Not Centered</span>
    </button>

请根据您的要求增加或减少字体大小

于 2013-08-16T13:04:58.767 回答
0

另一种方式

<button class="btn default" id="IdBack">
  <i class="glyphicon glyphicon-hand-left"></i> 
  <b>Back</b>
</button>
于 2014-01-09T09:46:42.003 回答
0

添加特定像素或百分比的边距。在我的应用程序中，根据区域的尺寸，这工作得很好。

CSS：

.someWrapperClass button span {
    margin-top: 120%;
}

HTML：

<div class="someWrapperClass">
    <button type="button" ng-click="SomeMethod()">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </button>
</div>
于 2015-10-22T07:12:47.483 回答