如何在 col-nn 中居中 ngb-timepicker

Question

我在 Angular 8 中有一个时间选择器组件，在 bootstrap 4 中。我试图将 ngb-timepicker 置于此组件内的 col-12 中。

<div class="row pickerContainer"> 
  <div class="col-12 pickerCenterer">
    <h2>Title</h2>
    <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
    <hr>
    <pre>Selected time: {{time | json}}</pre>
  </div>
</div>

.pickerContainer{
  text-align:center;
}
.pickerCenterer{
  display:inline-block;
  margin:0 auto;
}

这会导致文本居中，但时间选择器不会居中。 Stackblitz 示例：https://cqutyi.run.stackblitz.io/

如何让时间选择器本身居中？

Answer 1

您可以使用 row class 代替 col-12，如下所示。

<div class="row pickerContainer"> 
  <div class="row pickerCenterer">
    <h2>Title</h2>
    <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
    <hr>
    <pre>Selected time: {{time | json}}</pre>
  </div>
</div>

演示在这里 - https://stackblitz.com/edit/angular-zzvzn7