비율을 사용하여 매트 카드 제목 너비를 정의하십시오.

Question

매트 카드 제목 텍스트를 중심으로 배치 할 것입니다. 그래서 너비를 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> 

나는 또한 내 구성 요소를 호출 내 app.component.ts에 폭 persentage을 추가

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

CSS 파일 : 다음

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

을 styles.css 파일 width:100%을 본문에 추가했습니다. X %의 폭

Answer 1

각도 재료를 가지고 있지 않는 요소가 클래스 mat-card-header-text으로 <mat-card-title><div> 돌며 포장되어 어디

나는 볼 수 없습니다. 이것을 극복하는 한 가지 방법은 CSS에 다음을 추가하여 클래스를 오버라이드 (override)하는 것입니다

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

팁 - 당신은 유사한 문제가 컴파일 된 HTML 다음을 디버깅 Google 크롬 개발자 도구를 사용합니다.