首页 新闻 会员 周边

angular material：如何居中 mat-card 中的所有内容

0
悬赏园豆：30 [已解决问题] 解决于 2022-10-10 10:27

使用 angular material 卡片时遇到一个问题，给 mat-card 添加 text-align: center; 样式，<mat-card-header> 与 mat-card-content 中的内容不会居中，请问如何解决？

dudu的主页 dudu | 高人七级 | 园豆：30994
提问于：2022-10-09 11:47
< >
分享
最佳答案
0

通过2个 fxLayout 解决了问题

<mat-card fxLayout="column" fxLayoutAlign="center center">
  <mat-card-header>
    <mat-card-title></mat-card-title>
  </mat-card-header>
  <mat-card-content fxLayout="column" fxLayoutAlign="center center">
    <h1></h1>
  </mat-card-content>
  <mat-card-actions>
  </mat-card-actions>
</mat-card>
dudu | 高人七级 |园豆：30994 | 2022-10-10 10:25

如果 mat-card 中用到了 mat-list，需要另外添加下面的样式

.mat-list-item {
  display: flex;
  justify-content: center;
}
dudu | 园豆：30994 (高人七级) | 2022-10-10 10:27
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。