How to Center the Content inside Mat-Card Component - Angular 6

Question

I would like to align the image and button content to the center of the mat-card.

Have attempted to utilize the following CSS styles: justify-content: center margin-left: auto , margin-right: auto margin-left: 50% , margin-right: 50% content-align: center etc.

I attempted all of the solutions provided by Andrew Lobban at this point. I am immensely grateful for his patience in trying to find a solution with me.

The Card Component is as follows:

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'
  },
  ];

}

The cards are utilized here: 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>

With this code, they render as follows: Current Image

Thank you to everyone for their time and patience.

Andrew Lobban Andrew Lobban · Accepted Answer · 2018-05-29T18:15:44

Seems you are looking for the CSS style justify-content: center. This will center your content in the Mat-Card-Content.

I am sure there are many ways to do this, but I use this or I use @angular/flex-layout along with fxLayout="row" (or column) fxLayoutAlign="center" attributes.

How to Center the Content inside Mat-Card Component - Angular 6

1 Answers