Относительно мата-карты-заголовка не совмещается центр

Question

Я использовал mat-card, в том числе mat-card-title, для этого я использовал style="text-align:center"; но это не выравнивание центра

<mat-card style="text-align: center;">
  <mat-card-header >
<mat-card-title style="text-align: center;">
  spreadsheet
</mat-card-title>
</mat-card-header>
      <mat-card-content>
    <div id="spreadsheet"></div>
  </mat-card-content>
</mat-card>

А это скриншот браузера:

https://s tackru.com/image s/7d46b8ab20859fbd2189669a1b685813687e2c6a.png

Answer 1

Выравнивание текста не имеет эффекта, потому что тег mat-header имеет только ширину своего содержимого. Вы можете попробовать вот так

<mat-card >
  <div style="text-align:center;">
    <mat-card-title>spreadsheet</mat-card-title>
  </div>
  <mat-card-content>
<div id="spreadsheet">
</div>

Answer 2

HTML-файл:

      <mat-card class="title_center">
    <mat-card-title>spreadsheet</mat-card-title>
</mat-card>

css-файл:

      .title_center {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}