我正在开发一个简单的寻呼机(在 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>
最佳答案
btn
和 btn-sm
上的填充打乱了文本对齐。您的按钮太小无法容纳填充。设置 padding:0 5px;
对我有用。查看代码笔 here .
或者(不覆盖填充),您可以使用 btn-xs
类来制作超小按钮。
关于css - 如何在引导按钮中水平居中文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38114826/