Question

我需要在标题标签的左侧和右侧的标题中对齐文本内容。我尝试了不同的想法，但没有一个适合我。帮帮我。

 <div style="width: 40%">
  <mat-card>
    <mat-card-header class="card-container">
      <mat-card-title class="card-container-right"> Test right</mat-card-title>
      <mat-card-title class="card-container-left"> Test left</mat-card-title>
    </mat-card-header>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>

Answer 1

如果您想继续使用mat-title元素，也可以这样做：

查看有效的StackBlitz Example

在您的（我称之为）example-card.component.html文件中

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

然后在您的 example-card.component.css

中

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

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

..最后进入您的 styles.css

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

诀窍是将Angular材料.mat-card-header-text覆盖为mat-card-header宽度的100％。否则，它的行为类似于inline元素，并且仅占用其子元素文本的宽度。阻止您将它们隔开。

Answer 2

您可以在垫工具栏上使用材料设计

<mat-card-title>
   <span>Test left</span>
   <span class="fill-remaining-space"></span>
   <span>Test right</span>
</mat-card-title>

.css中的

.fill-remaining-space {
   flex: 1 1 auto;
}

对不起，这行不通!!!!!在Mat-Toolbar中起作用，而在Mat-card Title中则不起作用。

这是它的工作方式，我知道我曾经在某处使用过它

<mat-card>
  <mat-card-title-group>
    <span>Test left</span>
    <span class="fill-remaining-space"></span>
    <span>Test right</span>
  </mat-card-title-group>
</mat-card>

有关示例，请参见：https://stackblitz.com/edit/angular-rb5vmu

Answer 3

在 .mat-card-header 类上添加自定义CSS

 .mat-card-header{
        justify-content: flex-end /* for right*/
        justify-content: flex-start /* for left*/
        justify-content: centre /* for center*/

    }

如何在角4中对齐左右文本mat-card-header？

3 个答案: