Bootstrap 3 在 GlyphIcon 下对齐按钮文本答案

【问题标题】：Bootstrap 3 align button text underneath GlyphIconBootstrap 3 在 GlyphIcon 下对齐按钮文本
【发布时间】：2014-12-17 20:47:11
【问题描述】：

我有这段代码可以创建一些带有 GlyphIcon 和一些文本的 Bootstrap 3 按钮，但问题是文本在图标的右侧对齐。如何对齐图标下方的文字？

<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-file"></span>Archive</button>
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-trash"></span>Delete</button>
</div>
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-share"></span>Resend</button>

【问题讨论】：

标签： css button twitter-bootstrap-3 glyphicons

【解决方案1】：

将text-center 辅助类添加到.btn，并在图标之后、文本之前添加<br>。

<button type="button" class="btn btn-default btn-lg text-center"><span class="glyphicon glyphicon-share"></span><br>Resend</button>

演示：http://www.bootply.com/SWzsbPwPWC

【讨论】：

+1 如此简单，而且有效。我会尽快接受答复