在按钮中居中 Twitter Bootstrap 3 Glyphicons

Posted 2023-03-06

【中文标题】在按钮中居中 Twitter Bootstrap 3 Glyphicons

【英文标题】：Center Twitter Bootstrap 3 Glyphicons in buttons

【发布时间】：2013-08-18 20:54:18

【问题描述】：

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

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

http://bootply.com/74652

【问题讨论】：

我看不到您提供的示例中的字形。你的意思是你想让字形和文本都在按钮内居中？

【参考方案1】：

使用字形图标将文本移出<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>

【讨论】：

我遇到了一个问题，即按钮显示的高度与 input-group 内配对的输入文本的高度不同。该解决方案已解决该问题，尽管图标最初在按钮上显得太低。使用vertical-align:top 解决了这个问题。

注意：vertical-align middle 可能并不总是能解决这个问题，尤其是如果你的单词只有上升（f，t）或下降（g，y，q） )，因为单词的垂直框的中间不会与图标的垂直框的中间完全对齐。

正要走老路，改用一张图片（yuck！）。不知道vertical-align 属性可以用于这样的字形！谢谢！

【参考方案2】：

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

【参考方案3】：

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

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

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

【参考方案4】：

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

【讨论】：

中间的文字向上并与字形图标底部边框对齐。悲伤，因为这对我来说听起来很合理。

【参考方案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 以获取实时示例。

【参考方案6】：

我设法做到了：

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

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

【参考方案7】：

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

我设法让我的工作如下：

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;

【参考方案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>

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

【讨论】：

CSS 太多了...@Russ 的回答更实用。

“CSS 太多了”？那里只有一处房产。 2nd 范围只是一个示例。

我的意思是，将图标与字体大小紧密联系在一起并不好。我不知道当我写那个旧评论时我在想什么：P

【参考方案9】：

其他方式

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

【参考方案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>