Как выровнять кнопку по центру в mat-grid-tile-footer

Question

У меня есть mat-grid-list, где я перечисляю элементы в представлении.

выпуск 1: Каждый элемент имеет раздел mat-grid-tile-footer, где я отображаю кнопку angular материала. В данный момент кнопка выровнена по левому краю в разделе нижнего колонтитула, и я хочу выровнять кнопку в центре mat-grid-tile-footer, используя приведенный ниже код (гибкий центр строки также не работает внутри нижнего колонтитула), но он не работает. Есть идеи?

выпуск 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>

TRY 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 : невозможно наблюдать поведение текста, становящегося невидимым

рабочий стек * здесь

обновление : в свете комментария ниже ... удалите 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;
    }