Как разместить тест в в mat-toolbar по центру

Question

Пытаюсь разместить текст по центру в элементе mat-toolbar Angular Material. Но он все равно остается в левом углу. Пробовал использовать при выравнивании Bootstrap, все равно тест остается с лева.

<mat-toolbar>
  <span>
    <div class="my-header">
        Тест заголовка
    </div>
  </span>
</mat-toolbar>

css файл

.my-header {
    display: flex;
    align-items: center;
    justify-content: center
  }

Answer 1

Как вариант можно сделать так: Делаем блок my-header, который займет всю ширину и высоту в mat-toolbar. Он будет своеобразным контейнером, относительно него уже спозиционируем через flex наш контент, в данном случае это блок с текстом.

.my-header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<mat-toolbar>
  <div class="my-header">
    <div>Тест заголовка</div>
  </div>
</mat-toolbar>

Пример можно посмотреть на stackblitz

P.S. Использовать еще и bootstrap для того, чтобы задавать стили - это избыточно. Angular-Material и так содержит стили, по сути вы используете две крупные библиотеки со стилями, что не очень хорошо.

БЛОГ НА HUSL

Как разместить тест в в mat-toolbar по центру

Ответы (1 шт):