Angular 材料中的中心对齐内容不起作用答案

【问题标题】：Center align content in Angular material is not workingAngular 材料中的中心对齐内容不起作用
【发布时间】：2020-04-24 00:28:22
【问题描述】：

我正在使用 Angular 8 和 Angular Material 进行布局。

我有一个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。

我尝试用 CSS 添加text-center

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

但这不起作用。难道没有预定义的class 用于对齐Angular Material 中的内容吗？

我在 Google 搜索中找到了一个：https://material.angularjs.org/latest/layout/alignment，但这是Angularjs 的形式。

【问题讨论】：

试试.text-center { text-align: center !important; }
没有预定义的类，比如 bootstrap 或 Angularjs 材料吗？
@AliWahab !important 无效。
我确信它是可行的。您能创建一个 stackBlitz 示例吗？
<mat-card class="w-100-p"></mat-card> .w-100-p{ width: 100% } if display: flex then put display: flex; align-items: center; justify-content: center;

标签： angular angular-material

【解决方案1】：

你可以用 flex 来做，在你的组件中添加这个 css：

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

【讨论】：

【解决方案2】：

试试下面的，

使用普通 css，将 margin: 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>

【讨论】：

【解决方案3】：

试试这个小技巧。它在 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>

【讨论】：