如何在mat-grid-tile-footer中居中按钮及解决按钮文字消失问题

Hey Saurabh! Let's work through these two problems with your mat-grid-tile-footer setup—they're both solvable with a few tweaks to styling and defaults.

Problem 1: Centering the Button in the Footer #

The core issue here is that Angular Material applies default styles to elements inside mat-grid-tile-footer that override your flex layout attempts. Specifically, this built-in rule blocks your centering efforts:

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

Here are two reliable fixes:

Option 1: Custom Class with CSS Overrides #

Add a custom class to your footer's inner div, then override Material's default margins:

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

Add this to your component's stylesheet (or global styles):

.footer-button-container {
  width: 100%;
  height: 100%;
}

/* Override Material's default margin rule */
.mat-grid-tile .mat-grid-tile-footer>.footer-button-container {
  margin: 0 auto;
}

The width: 100% ensures the flex container spans the entire footer, so fxLayoutAlign can properly center the button both horizontally and vertically.

Option 2: Quick Inline Style Fix #

If you want a fast test without extra classes, force the container to take full space and override margins inline:

<mat-grid-tile-footer [style.background]="'white'"> 
  <div style="width:100%; height:100%; margin:0 auto;" fxLayout="row" fxLayoutAlign="center center"> 
    <button mat-raised-button>Try me</button> 
  </div> 
</mat-grid-tile-footer>

Problem 2: Button Text Disappearing with White Footer Background #

This is a simple color contrast quirk! By default, mat-raised-button uses your theme's primary color (usually a dark shade) with white text. When you set the footer background to white, the white text blends completely into the background. Here are two fixes:

Option 1: Switch Button Color Variant #

Use Angular Material's built-in color attributes to pick a button style with darker text:

<button mat-raised-button color="accent">Try me</button>

Or use color="warn"—both variants have text colors that stand out against a white background.

Option 2: Customize Button Text Color #

If you want to keep the primary button style, override the text color directly:

<button mat-raised-button style="color: #333;">Try me</button>

For cleaner code, use a CSS class:

.footer-primary-button {
  color: #333 !important;
}

Then apply it to the button:

<button mat-raised-button class="footer-primary-button">Try me</button>

内容的提问来源于stack exchange，提问作者Saurabh Kumar