Question

如果md-sort-header被添加到md-table中的md-header-cell中，它总是左对齐。如何对标题单元格进行居中对齐，例如＆＃34; name＆＃34;？

<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

Answer 2

接受的答案是正确的。但是，::ng-deep已弃用，将来可能会被删除（official documentation）。

阴影穿透后代组合子已被弃用且支持从主要浏览器和工具中删除。因此我们打算放弃支持Angular（对于所有3个/ deep /，＆gt;＆gt;＆gt;和:: ng-deep）。直到那么:: 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-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 4

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

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

然后在html上

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

Answer 5

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

<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 中指定的名称应用。

角度材料2表头中心对齐

6 个答案: