css - Angular Material 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.x.x 的更新，不需要 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