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

Question

我正在研究一个简单的寻呼机（在Angular 2中），但我的造型有问题。我正在使用bootstrap进行页面设计，并使用bootstrap按钮进行寻呼机。我正在使用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;对我有用。请参阅codepen here。

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