将 material 卡片标题的文本右对齐
Align the text of material card title to right
我尝试将 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>
你可以用这个
<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>
你可以这样做:
<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;
}
我尝试将 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>
你可以用这个
<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>
你可以这样做:
<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;
}