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

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; 对我有用。查看代码笔 here .

或者(不覆盖填充)，您可以使用 btn-xs 类来制作超小按钮。