Как центрировать ngb-timepicker в col-nn

Question

У меня есть компонент выбора времени в Angular 8, с bootstrap 4. Я пытаюсь центрировать ngb-timepicker в col-12 внутри этого компонента.

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

.pickerContainer {text-align: center; } .pickerCenterer {display: inline-block; поле: 0 авто; }

В результате текст центрируется, а не указатель времени. Пример Stackblitz здесь: https://cqutyi.run.stackblitz.io/

Как центрировать сам таймер?

Answer 1

Вы можете использовать row class вместо col-12, как показано ниже.

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

Демонстрация здесь - https://stackblitz.com/edit/angular-zzvzn7