Выровнять по центру содержимое в Angular материал не работает

Question

Я использую Angular 8 и Angular Материал для макета.

У меня есть card с progress spinner

<mat-card>
  <mat-card-content class="text-center">
    <mat-progress-spinner class="text-center"
      [color]="color"
      [mode]="mode">
    </mat-progress-spinner>
  </mat-card-content>
</mat-card>

Выровнен по left. Я хочу выровнять center.

Я пытался добавить text-center с CSS

.text-center {
  text-align: center;
}

Но это не работает. Нет ли предопределенного class для выравнивания контента в Angular материале?

Я нашел его в поиске Google: https://material.angularjs.org/latest/layout/alignment, но это форма Angularjs версия .

Answer 1

Попробуйте следующее,

Используйте обычный css, Добавьте поле: 0 auto к тегу mat-progress-spinner.

Это сработало для меня.

<mat-card>
  <mat-card-content>
    <mat-progress-spinner style="margin: 0 auto;"
      [color]="color"
      [mode]="mode">
    </mat-progress-spinner>
  </mat-card-content>
</mat-card>

Answer 2

Попробуйте этот маленький взломать. Работает нормально в stackBlitz

<mat-card>
  <div align="center">
 <mat-card-content >
    <mat-progress-spinner
      [color]="color"
      [mode]="mode">
    </mat-progress-spinner>
  </mat-card-content>
  </div>
</mat-card>

Answer 3

Вы можете сделать это с помощью flex, добавив css в свой компонент:

mat-card-content {
    justify-content: center;
    display: flex;
}