如何在引导按钮中水平居中文本？

Question

我正在开发一个简单的寻呼机（在 Angular 2 中），但我的样式有问题。我在页面设计中使用引导程序，在寻呼机中使用引导程序按钮。我正在使用line-height 将文本垂直居中，效果很好，但我不知道如何将按钮中的文本水平居中。文本始终显示在右侧。我试过text-align: center，我试过引导类text-center，但文字仍然在右边。

我的html很简单：

<div class="pager">
    <button class="btn btn-sm" *ngFor="let page of pages">{{page}}</button>
</div>

（对于那些不了解 Angular 2 的人：这将遍历 pages 数组并创建与数组具有值的按钮一样多的按钮，并将这些值用作按钮文本）

我的css（sass）：

.pager {
    display: inline-block;
    margin-left: 8px;

    button {
        max-height: 18px;
        max-width: 18px;
        margin-left: 2px;
        background: $topBarControlBackground;
        color: $topBarColor;
        line-height: 50%;
        font-size: 80%;
    }
}

结果如下：

.pager {
    display: inline-block;
    margin-left: 8px;

    button {
        max-height: 18px;
        max-width: 18px;
        margin-left: 2px;
        background: $topBarControlBackground;
        color: $topBarColor;
        line-height: 50%;
        font-size: 80%;
    }
}

<div class="pager">
    <button class="btn btn-sm" *ngFor="let page of pages">{{page}}</button>
</div>

Answer 1

btn 和 btn-sm 上的填充会弄乱文本对齐。您的按钮太小而无法容纳填充。设置padding:0 5px; 对我有用。见密码笔here。

或者（不覆盖填充），您可以将btn-xs 类用于超小按钮。