角材料 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;
  }

演示

---

md-header-cell被“翻譯”到 class="mat-sort-header-container" 的容器。 使用它，您可以使用ng-deep設置其樣式。 使用 flexbox 將其內容居中。 將以下內容放入組件樣式表中：

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

演示

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;    }

Answer 4

我認為該問題的給定解決方案在他們的方法中過於嚴格，我有一個類似的問題，我需要更改mat-sort-header-container一些 css 屬性，但是是動態的。

我做了一些類似於 Vega's answer 的事情，但在如何采用樣式方面略有不同：

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

它會顯示其母公司中的一些屬性風格mat-header-cell是在你的HTML代碼，這樣無論風格你提供mat-header-cell ，並在ng-deep是從其父繼承那么只有那些風格和讓利比那會下降那個層次結構。

Answer 5

如果您不希望所有標題單元格居中對齊，您可以組合兩個類：

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

然后在html上：

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

Answer 6

如果您想逐列對齊標題和行單元格內容（允許列之間有不同的對齊方式），您可以執行以下操作：

<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指定的名稱應用。