css - 在按钮中居中 Twitter Bootstrap 3 Glyphicons

Question

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

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

http://bootply.com/74652

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