angular - 如何使内容在Mat-Card组件内部居中-Angular 6

Question

我想将图像和按钮的内容对齐到mat-card的中心。

尝试利用以下CSS样式:
证明内容:中心
左边距:自动；右边距:自动
左边距:50％，右边距:50％
内容对齐:居中
ETC。

此时，我尝试了Andrew Lobban提供的所有解决方案。我非常感谢他的耐心为我寻求解决方案。

卡组件如下:

的HTML

<div>
<mat-grid-list cols="6" rowHeight="250px">
    <mat-grid-tile *ngFor="let card of card" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card">
        <mat-card-header>
        </mat-card-header>
        <div>
        <mat-card-content class="dashboard-card-content">
           <img src={{card.IMGPath}}>
          <a mat-raised-button color="primary" href={{card.ButtonLink}}>{{card.ButtonLabel}}</a>
        </mat-card-content>
      </div>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

的CSS

.grid-container {
    margin: 20px;
  }

  .dashboard-card {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    max-width: 150px;
    min-width: 150px;
  }

.dashboard-card-content {
    justify-content: center
  }

typescript

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-property-management',
  templateUrl: './property-management.component.html',
  styleUrls: ['./property-management.component.css']
})
export class PropertyManagementComponent {

  card = [{ 
    title: 'Capital Control', cols: 1, rows: 1, 
    IMGPath: 'redacted' ,
    ButtonLabel:'Capital Control',
    ButtonLink:'redacted'
  },
  { 
    title: 'New Entity', cols: 1, rows: 1, 
    IMGPath: 'redacted' ,
    ButtonLabel:'New Entity',
    ButtonLink:'redacted'
  },
  ];

}

这些卡在这里使用:
的HTML

<div class="grid-container">
  <h3 class="mat-h3">Property Management</h3>
  <mat-divider></mat-divider>
  <app-property-management></app-property-management>
  <h3 class="mat-h3">Information Technology</h3>
  <mat-divider></mat-divider>
  <app-information-technology></app-information-technology>
</div>

使用此代码，它们呈现如下: Current Image

感谢大家的时间和耐心。

Answer 1

似乎您在寻找CSS样式justify-content: center。这会将您的内容放在Mat-Card-Content中。

我确定有很多方法可以执行此操作，但是我可以使用此方法，也可以使用@ angular/flex-layout以及fxLayout="row"(或列)fxLayoutAlign="center"属性。