html - 关于 mat-card-title 不对齐中心

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>

这是浏览器的截图：

Answer 1

文本对齐无效，因为 mat-h​​eader 标记仅具有其内容的宽度。你可以这样尝试

<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 */
}