Regarding mat-card-title not aligning center

Question

I've use mat-card, in that I've used mat-card-title, for that I've used style="text-align:center"; but it's not aligning center

<mat-card style="text-align: center;">
  <mat-card-header >
<mat-card-title style="text-align: center;">
  spreadsheet
</mat-card-title>
</mat-card-header>
      <mat-card-content>
    <div id="spreadsheet"></div>
  </mat-card-content>
</mat-card>

And this is the screenshot of the browser:

Add style to mat-card-header, It would align center – Varit J Patel Apr 21 '20 at 05:33 — Varit J Patel, Apr 21 '20 at 05:33

score 3 · Answer 1 · answered Feb 20 '22 at 15:20

3

html file:

<mat-card class="title_center">
    <mat-card-title>spreadsheet</mat-card-title>
</mat-card>

css file:

.title_center {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

answered Feb 20 '22 at 15:20

Serhii Nahornyi

31
3

score 1 · Accepted Answer · answered Apr 21 '20 at 05:56

Text align not having effect because mat-header tag only having the width of its content. You can try like this

<mat-card >
  <div style="text-align:center;">
    <mat-card-title>spreadsheet</mat-card-title>
  </div>
  <mat-card-content>
<div id="spreadsheet">
</div>

Regarding mat-card-title not aligning center

2 Answers2