角材料2表头中心对齐

Question

如果将md-sort-header添加到md-table中的md-header-cell中,则它始终是左对齐的.如何对标题单元格进行居中对齐,例如"名称"？

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> 
      Name 
</md-header-cell>

plnkr

Answer 1

更新Angular Material 5.xx,无需ng-deep:

  mat-header-cell {
   display:flex;
   justify-content:flex-end;
  }

DEMO

md-header-cell得到'翻译'到class ="mat-sort-header-container"的容器.使用它,您可以设置其样式ng-deep.使用flexbox将其内容居中.将以下内容放在组件样式表中:

::ng-deep .mat-sort-header-container {
  display:flex;
  justify-content:center;
}

DEMO

Answer 2

接受的答案是正确的.但是,::ng-deep折旧并且将来可能会被删除(官方文档).

不推荐使用阴影穿透后代组合器,并且正在从主要浏览器和工具中删除支持.因此,我们计划放弃Angular中的支持(对于/ deep /,>>>和:: ng-deep的所有3个).在此之前:: ng-deep应该是首选,以便与工具更广泛地兼容.

正确的方法是使用ViewEncapsulation.在component.ts中,添加以下内容:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

并覆盖component.css文件中的类:

.mat-sort-header-container {
  display:flex;
  justify-content:center;
}

Answer 3

.mat-header-cell {    text-align: center;    }