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

如果您想逐列对齐标题和行单元格内容（允许列之间的不同对齐方式），您可以执行以下操作：

<mat-table>
    <ng-container matColumnDef="myColumn">
      <mat-header-cell *matHeaderCellDef> My Column </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.myField}} </mat-cell>
    </ng-container>
...

.mat-column-myColumn{
  display: flex !important;
  justify-content: flex-start !important; /* Left aligned*/
}

通过matColumnDef 中指定的名称应用对齐方式。

Answer 2

如果您不希望所有标题单元格对齐中心，您可以组合两个类：

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

然后在html上：

<th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>

Answer 3

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

Answer 4

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

Answer 5

我认为给定的问题解决方案在他们的方法上过于严格，我遇到了类似的问题，我需要更改 mat-sort-header-container 的一些 css 属性，但要动态更改。

我做了类似 Vega 的回答，但在风格的采用方式上略有不同：

::ng-deep .mat-sort-header-container{
    justify-content: inherit;
    /* other inheritable properties */
}

它为其父级打开一些属性以设置您的html代码中的mat-header-cell 样式，因此无论您在mat-header-cell 和从其父级继承的ng-deep 中提供的任何样式，都只有那些样式，而没有别的这会沿着那个层次结构下去。

Answer 6

接受的答案是正确的。但是，::ng-deep 已贬值，将来可能会被丢弃 (official documentation)。

不推荐使用穿透阴影的后代组合器，支持 被从主要浏览器和工具中删除。因此，我们计划放弃 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;
}