Как горизонтально центрировать текст в бутстрап-кнопке?

Question

Я работаю над простым пейджером (в Angular 2), но у меня проблемы со стилем. Я использую bootstrap для моего дизайна страницы, и я использую кнопки бутстрапа для пейджера. Я использую line-height для вертикального центрирования текста, и это работает отлично, но я не могу понять, как горизонтально центрировать текст в кнопках. Текст всегда отображается справа. Я пробовал text-align: center, я попробовал класс bootstrap text-center, но текст остается справа.

Мой HTML очень прост:

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

(Для тех, кто не знает, угловые 2: это перебирает массив страниц и создает столько кнопок, как массив имеет значения и использует значения в качестве кнопки тексты)

Мой CSS (дерзость):

.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 для сверхмалых кнопок.