如何在 mat-grid-tile-footer 中居中对齐按钮

Question

我有 mat-grid-list 我在视图中列出项目。

问题 1： 每个项目都有一个mat-grid-tile-footer 部分，我在其中显示一个角度材质按钮。该按钮当前在页脚部分的左侧对齐，我想使用下面的代码将按钮在mat-grid-tile-footer 的中心对齐（flex row center 在页脚内也不起作用）但它不起作用。有什么想法吗？

问题 2： 在将[style.background]="'white'" 应用到页脚时，mat-raised-button 文本也变得不可见。似乎它也覆盖了按钮行为。有什么想法吗？

<mat-grid-tile-footer [style.background]="'white'">
   <div fxLayout="row" fxLayoutAlign="center center">
        <button mat-raised-button>Try me</button>
  </div>
</mat-grid-tile-footer>

试一试 在使用margin: auto 时，我看到更改的样式没有被拾取，下面是使用的样式

.mat-grid-tile .mat-grid-tile-header>*, .mat-grid-tile .mat-grid-tile-footer>* {
        margin: 0;
        padding: 0;
        font-weight: normal;
        font-size: inherit;
    }

Answer 1

问题 1：添加 CSS .mat-grid-tile-footer div{ margin: auto; } 即可解决

问题 2：无法观察到文本变得不可见的行为

工作stackblitz here

更新：根据下面的评论... 从您问题中的类中删除 margin: 0... 这样 CSS 就只有：

.mat-grid-tile-footer div{ margin: auto; }
.mat-grid-tile .mat-grid-tile-header>*, .mat-grid-tile .mat-grid-tile-footer>* {
        padding: 0;
        font-weight: normal;
        font-size: inherit;
    }