中心Twitter Bootstrap 3按钮中的Glyphicons

Question

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

图标和文字有相同的底线,但我相信一个好看的按钮图标应该根据文本居中,不应该吗？知道怎么做到这一点？

http://bootply.com/74652

Answer 1

移动文本出来的<span>与glyphicon并应用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>

Answer 2

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