ブートストラップボタンのテキストを水平に中央に配置する方法は？

Question

私は単純なページャ（Angular 2）で作業していますが、スタイリングに問題があります。私は自分のページデザインにブートストラップを使用しています。私はページャ用のブートストラップボタンを使用しています。私はline-heightをテキストの垂直方向のセンタリングに使用していますが、うまくいきますが、ボタンのテキストを水平方向に中央に配置する方法がわかりません。テキストは常に右側に表示されます。私はtext-align: centerを試しましたが、ブートストラップクラスtext-centerを試しましたが、テキストは右側に残ります。

私のHTMLは非常に簡単です：ページのアレイの上に、この反復し、配列に値を持っており、ボタンなどの値を使用してできるだけ多くのボタンを作成します。2角度を知らない人のために（

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

テキスト）

私の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%; 
    } 
} 

そして、ここでは結果であり、 btnとbtn-sm上

.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

パディングは、テキスト整列をめちゃくちゃにされています。あなたのボタンは、パディングに対応するには小さすぎます。 padding:0 5px;を設定してください。 codepen hereを参照してください。

代わりに（パディングをオーバーライドしないで）、超小型ボタンにはクラスbtn-xsを使用できます。