代码之家 › 专栏 › 技术社区 › Hamza Haddad

使用百分比定义mat卡标题宽度

md-card angular-material2 angular css html

1

Hamza Haddad · 技术社区 · 7 年前

我会将mat卡标题文本居中。所以我需要把它的宽度设置为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%;
  }

我还在我的应用程序中添加了宽度百分比。组成部分ts我调用组件的位置:

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

然后我开始设计风格。我添加的css文件 width:100% 到身体。

我看不到宽度不为x%的元素在哪里

2 回复 | 直到 7 年前

1

8

Wallace 7 年前

棱角材质正在包裹 <mat-card-title> 内部a <div> 有一个班级 mat-card-header-text . 克服此问题的一种方法是通过向css中添加以下内容来重写该类:

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

提示-下次遇到类似问题时,请使用Google Chrome开发工具调试已编译的HTML。

2

1

Grant Curell 5 年前

被接受的答案对我不起作用。我必须补充:

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

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