角度材料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

原文由 Yong 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Angular Material 5.xx 的更新，不需要 ng-deep：

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

演示

---

md-header-cell 被“翻译”成一个带有 class=“mat-sort-header-container” 的容器。使用它，您可以使用 ng-deep 设置其样式。使用 flexbox 将其内容居中。将以下内容放入组件样式表中：

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

演示

原文由 Vega 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

接受的答案是正确的。但是， ::ng-deep 已贬值，将来可能会删除（ 官方文档）。

shadow-piercing descendant combinator 已被弃用，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 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;
}

原文由 FAISAL 发布，翻译遵循 CC BY-SA 3.0 许可协议