angular - how to align content to the center of the card

Question

<mat-card id="card">
<mat-card-title>
    login
</mat-card-title>

<mat-card-content>
    
    <mat-form-field>
        <input matInput placeholder="email">
    </mat-form-field><br/>

    <mat-form-field>
        <input matInput placeholder="password">
    </mat-form-field><br/>
        <button mat-raised-button color="primary" style="margin-right:5px;">login</button>
        <button mat-raised-button color="primary" style="margin-right:5px;">register</button>  

</mat-card-content>

I tried this:

display: block;
margin: auto;

but its now working, any help would be appreciated. I'm new to angular styling

Image

Possible duplicate of [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Baruch, Aug 03 '18 at 10:15

score 3 · Accepted Answer · answered Aug 03 '18 at 16:08

3

Simply use this case

mat-card {text-align: center}

And if you want to set heading in left then use this also.

mat-card-title { text-align: left }

answered Aug 03 '18 at 16:08

Piyush Jain

1,895
3
19
40

score 1 · Answer 2 · answered Aug 03 '18 at 10:30

1

use style="text-align: center;"

I have create a demo on Stackblitz

<mat-card id="card" style="text-align: center;"><mat-card>

answered Aug 03 '18 at 10:30

Krishna Rathore

9,389
5
24
48

score 1 · Answer 3 · answered Jul 11 '20 at 19:23

1

With @angular/flex-layout it can be done by using fxLayout="row" (or column) and fxLayoutAlign="center" attributes as follow:

<mat-card fxLayout="column" fxLayoutAlign="center">
  // Your content here  
</mat-card>

answered Jul 11 '20 at 19:23

H S W

6,310
4
25
36

angular - how to align content to the center of the card

3 Answers3