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

【问题标题】：How do I center Angular Material table column headers and mat-cell content如何将 Angular Material 表列标题和 mat-cell 内容居中
【发布时间】：2019-02-18 09:03:08
【问题描述】：

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

【问题讨论】：

标签： angular angular-material

【解决方案1】：

尝试使用类文本中心

<td mat-cell *matCellDef="let element" class="text-center"> {{element.multiplicador}} </td>

【讨论】：

【解决方案2】：

如果您使用的是排序标题，则需要提供

table {
    width: 100%;
    text-align: center !important;
}

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

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

【讨论】：

【解决方案3】：

这完全适用于 mat-table。

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

试试这个，它对我有用。

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

【讨论】：

【解决方案6】：

这对我有用

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

table {
  text-align: center !important;
  width: 100%;
}

【讨论】：

【解决方案7】：

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

table {
  width: 100%;
}

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

或

angular material 2 table header center alignment

【讨论】：

【解决方案8】：

将此样式与!important一起使用

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

【讨论】：

【解决方案9】：

你可以使用text-align: center

这是一个示例 StackBlitz 从 Material 文档中调整

【讨论】：

【解决方案10】：

你可以创建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

【讨论】：

请提及角度版本？ stackblitz 可以很好地与具有 mat-cell 属性的“td”元素配合使用。在 Angular 8 中，我直接使用“mat-cell”元素，我无法使这个解决方案发挥作用。尝试将 text-align:center 放入材料表识别的动态创建的类之一，也没有运气。
@chrisinmtown 如您所见，这个问题来自 2018 年，所以它是 angular 1
@chrisinmtown ：对于最近的 Angular (8/9)，您必须在 @Component 属性中使用 encapsulation: ViewEncapsulation.None 告诉您的组件使用“标准 DOM”而不是“影子 DOM” .