中心Twitter Bootstrap 3按钮中的Glyphicons

Question

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

图标和文字有相同的底线，但我相信一个好看的按钮图标应该根据文字居中，不应该吗？知道如何实现这个目标吗？

http://bootply.com/74652

Answer 1

使用glyphicon将文本移出<span>并将vertical-align: middle;应用于<span>

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

<强> Demo

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

<button class="btn btn-default" style="vertical-align: middle;">
    <i class="fa fa-times"></i> Centered
</button>

Answer 2

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

Answer 3

对于某些垂直对齐可能由于定位而无效：如果您查看.glyphicon类，您会看到它已设置为相对，请尝试将其设置为“继承”＆＃39; e.g：

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

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

Answer 4

在vertical-align: middle;

上试试.glyphicon-th:before

Answer 5

上述方法都不适合我自己，但在元素上使用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。

Answer 6

我设法做到了这样：

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

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

Answer 7

问题：字形图标比按钮文字高2 xx。使用此处的示例将其修复如下。谢谢（Alastair Maw）。

我设法让我的工作如下：

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;
}

Answer 8

<button class="btn btn-default">
          <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
          <span style="font-size: 17px;">Not Centered</span>
    </button>

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

Answer 9

其他方式

<button class="btn default" id="IdBack">
  <i class="glyphicon glyphicon-hand-left"></i> 
  <b>Back</b>
</button>

Answer 10

添加特定像素或百分比的边距。在我的应用程序中，根据区域的尺寸，这种工作非常漂亮。

<强> 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>