Как выровнять текст в в angular

Question

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span class="toolbar">Welcome to Conflux Application</span>
  </mat-toolbar-row>
</mat-toolbar>

span {
  text-align: center;
}

Выше приведены следующие вид / шаблон и дизайн панели инструментов, но текст "Welcome to Conflux Application" не выровнен по центру даже?

Answer 1

В вашем случае, сначала вам нужно установить ширину диапазона в 100%, чтобы текст внутри него мог иметь пространство в центре.

Поскольку span является встроенным элементом, поэтому нам нужно использовать свойство display: inline block, чтобы мы могли установить указанное выше свойство width.

Требуются изменения:

span {
  text-align: center;
  display: inline-block;
  width: 100%;
}

Рабочий пример URL - https://stackblitz.com/edit/angular-5ptsm7

Answer 2

mat-toolbar, а затем mat-toolbar-row, по умолчанию отображаются в виде flex. Просто добавьте это в ваш css файл:

.mat-toolbar-row {
  justify-content: center;
}