如何在mat2 /材质上将mat-cell内容与图标对齐?

时间:2017-09-18 14:31:18

标签: html css angular angular-material angular-material2

使用我的代码开始

<!-- Edit Column -->
<ng-container mdColumnDef="edit">
  <md-header-cell *mdHeaderCellDef> {{'companies.edit-column' | translate}}</md-header-cell>
  <md-cell *mdCellDef="let element"><a (click)="toCompany(element.id)"><md-icon class="md-dark">edit</md-icon></a></md-cell>
</ng-container>

要求是将编辑图标的位置调整到右侧(就材料设计的右侧填充而言)?现在它似乎被强行左对接了。将style="{text-align: right}" 应用于md-cell不起作用。

libs版本

"@angular/material": "2.0.0-beta.10"
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "^4.1.3"

1 个答案:

答案 0 :(得分:10)

使用以下任何一种:

mat-cell{
  display:flex !important;
  justify-content:flex-end!important;

}

::ng-deep .mat-cell{
  display:flex !important;
  justify-content:flex-end!important;
}

DEMO