如何将 Angular Material 表格列标题和 mat-cell 内容居中

Question

谁能提供有关如何居中（或向右移动）Angular Material 表格标题和单元格文本的简明解释？似乎有很多需要 /deep/ 和其他版本，这些版本可能会或可能不会被弃用。

Answer 1

如果上面没有答案，那么试试这个：

table {
  width: 100%;
}

mat-header-cell, mat-cell {
  justify-content: center;
}

或者

角材料 2 表头中心对齐

Answer 2

这完全适用于 mat-table。

td, th {
    text-align: center !important;
    vertical-align: middle !important;
}

.mat-sort-header-container {
    justify-content: center !important;
}

Answer 3

使用这种风格 !important

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

Answer 4

试试这个，这对我有用。

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

Answer 5

如果您使用这种表格布局，您可以轻松实现这一点

<table mat-table [dataSource]="dataSource" style="width: 100%;">

   <!-- identification Column -->
   <ng-container matColumnDef="identification">
       <th mat-header-cell *matHeaderCellDef> ID </th>
       <td mat-cell *matCellDef="let element"> {{element.identification}} </td>
  </ng-container>

  <!-- value Column -->
  <ng-container matColumnDef="total">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{ element.value | currency: 'ILS' }} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

并将其放入where-the-table-is.component.css

td.mat-cell, th.mat-header-cell {
    text-align: center;
    justify-content:center;
}

Answer 6

您可以创建 css 类

.centre {
  text-align: center
}

并将其添加到您的 html 中

<th mat-header-cell *matHeaderCellDef class="centre"> Symbol </th>

就像这里一样： https: //stackblitz.com/edit/angular-qfav5c ?file=app%2Ftable-basic-example.css