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

Question

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

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

问题 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>

尝试 1 在使用 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

更新：根据下面的评论... 从问题中的 class 中删除 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;
    }