我尝试将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>
答案 0 :(得分: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>
然后在css / scss中为这些类定义一些样式:
.title-card-right{
display: inline;
float: right;
}
.title-card-left{
display: inline;
}
然后在您的styles.css中
.mat-card-header-text{
width: 100% !important;
}
答案 1 :(得分: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>