Define mat-card-title width using percentage

Question

I would center mat-card-title text. so I need to put it's width to 100% but I don't get a result, only if I use "px".

So I tried to put a width to all parents containers but no result .

Here's my html file

<div Fxlaout="row" fxLayoutGap="20px" class="container">
    <div fxFlex=30>
        <mat-card>
            <mat-card-header>
                <mat-card-title>Collaborateurs sur ce projet</mat-card-title>
            </mat-card-header>
            <mat-card-content>

                <mat-list role="list" *ngFor="let per of Projet?.pers">
                    <mat-list-item role="listitem">Nom : {{per.name}}</mat-list-item>
                    <mat-list-item role="listitem">poste : {{per.poste}}</mat-list-item>
                </mat-list>
            </mat-card-content>
        </mat-card>
    </div>
    <div fxFlex>
        <mat-card>
            <mat-card-header>
                <mat-card-title>Les fonctionnalités du produit</mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <mat-list role="list" *ngFor="let func of Projet?.backlog.fonctionnalite; let i=index">
                   <mat-list-item role="listitem">Fonctionnalité #{{i}} : {{func.fonctionnalite}}</mat-list-item>
                </mat-list>
            </mat-card-content>
         </mat-card>
    </div>
</div> 

CSS file

  mat-card {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    width: 100%;
  }
  mat-card-header {
    background-color: #116a94;
    color: white;
    height: 50px;
    width: 100%;
  }

  .container {
    background-color: #87b6bd;
    width: 100%;
  }
  mat-card-title {
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  }

  div {
    width: 100%;
  }

I also added width persentage in my app.component.ts where I call my component:

<app-navabar></app-navabar>
<div style="width:100%">
   <router-outlet></router-outlet>
</div>

then I styles.css file I added width:100% to the body.

I don't see where is the element that does not having a width of x%

Answer 1

Angular Material is wrapping your <mat-card-title> inside a <div> with a class mat-card-header-text. One way to overcome this is to override the class by adding the following to your css:

/deep/ .mat-card-header-text {
    width: 100%;
    text-align: center; 
}

Tip - use Google Chrome Developer Tools to debug the compiled HTML next time you have a similar problem.