将 Twitter Bootstrap 3 的 Glyphicons 居中显示在按钮中

Question

将 Twitter Bootstrap 3 的 Glyphicons 居中显示在按钮中

csstwitter-bootstrapglyphicons

45

我现在使用Twitter Bootstrap 3 RC2以及已经移动到单独存储库中的Twitter Bootstrap。我注意到，如果在按钮中使用文本，图标的居中对齐效果不是很好：

输入图片描述

图标和文本具有相同的底线，但是我认为为了一个好看的按钮，图标应该基于文本进行居中，对吗？有什么方法可以实现这一点吗？

http://bootply.com/74652

- Mahoni

我看不到您提供的示例中的字形。您是指您希望字形和文本都居中于按钮内吗？ - Mister Epic

10个回答

27

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

- kumarharsh

3

对于某些情况，由于定位的原因，vertical-align可能无法起作用：如果您查看.glyphicon类，则会发现它被设置为相对定位，尝试将其设置为“inherit”，例如：

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

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

- Vilius

1

问题：字形图标在按钮文本上方高出2像素。使用这里的示例进行修复。谢谢（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;
}

- Valkerie Silk

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以获取实时示例。

- Alastair Maw

1

我以这种方式成功地完成了它：

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

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

- Timo Türschmann

1

在 .glyphicon-th:before 上尝试使用 vertical-align: middle;。

- Mihai Alex

随着文本的中间部分上移，带有字形图标底部边框的线条也会上移。这让我感到有些沮丧，因为这听起来对我来说是合理的。 - Mahoni

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>

- Will Strohl

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>

请根据您的需求增加或减小字体大小。

- rajeshpanwar

太多的CSS了... @Russ的答案更实用。 - kumarharsh

3

“Way too much css”? 在那里只有一个属性。第二个span仅仅是一个例子。 - losnir

我的意思是将图标与字体大小紧密绑定并不好。我不知道当我写下那个旧评论时在想什么 :P - kumarharsh

0

另一种方式

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

- Shalini

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Russ Cam · Accepted Answer

将带有 glyphicon 的 <span> 中的文本移出，并将 vertical-align: middle; 应用于 <span>。

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

演示

在Bootstrap 4中使用Font Awesome图标可以像这样工作。

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