使用百分比定義 mat-card-title 寬度

Question

我會將 mat-card-title 文本居中。 所以我需要將它的寬度設置為 100% 但我沒有得到結果，只有當我使用“px”時。

所以我試圖為所有父容器設置一個寬度，但沒有結果。

這是我的 html 文件

<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文件

  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%;
  }

我還在 app.component.ts 中添加了寬度 persentage，我在其中調用了我的組件：

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

然后我在 style.css 文件中添加了width:100%到 body。

我看不到寬度為 x% 的元素在哪里

Answer 1

Angular Material 將您的<mat-card-title>包裹在一個帶有mat-card-header-text類的<div> 。 解決此問題的一種方法是通過將以下內容添加到您的 css 來覆蓋該類：

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

提示 - 下次遇到類似問題時，請使用 Google Chrome Developer Tools 調試已編譯的 HTML。

Answer 2

接受的答案對我不起作用。 我不得不補充：

  .mat-card-header-text {
    width: 100%;
  }

  .mat-card-header {
    justify-content: center;
  }