将 material 卡片标题的文本右对齐

Question

我尝试将 matcard 的标题右对齐，但 css 不起作用..为什么？

<mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}">
  <mat-card-header>

   <mat-card-title [ngStyle]="{ 'text-align':'right' }">BLABLA</mat-card-title>

  </mat-card-header>

</mat-card>

Answer 1

你可以用这个

<mat-card style="height:100px;width:300px;display:flex;justify-content:center;align-items:center;">
   <mat-card-content><span>Contents</span></mat-card-content>
</mat-card>

STACKBLITZ DEMO

Answer 2

你可以这样做：

<mat-card>
    <mat-card-header>
        <mat-card-title class="title-card-left">Test left</mat-card-title>
        <mat-card-title class="title-card-right">Test right</mat-card-title>
    </mat-card-header>
    <mat-card-content></mat-card-content>
</mat-card>

然后在 css/scss 中为这些类定义一些样式：

.title-card-right{
  display: inline;
  float: right;
}

.title-card-left{
  display: inline;
}

然后在你的 styles.css

里面

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

将 material 卡片标题的文本右对齐

Align the text of material card title to right

css

angular

angular-material

mat-card