Question

任何人都可以提供有关如何使“ Angular Material”表标题和单元格文本居中（或向右移动）的简要说明吗？似乎有很多关于需要/ deep /和其他版本的信息，这些版本可能会或可能不会被弃用。

Answer 1

将此样式与!important

一起使用

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

Answer 2

如果上面没有答案，请尝试以下方法：

table {
  width: 100%;
}

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

或

angular material 2 table header center alignment

Answer 3

这完全适用于 mat-table。

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

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

Answer 4

这对我有用

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

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

Answer 5

您可以创建CSS类

DateTimeFormatter FMT1 = DateTimeFormat.forPattern("E, d MMM yyyy HH:mm:ss Z");
DateTimeFormatter FMT2 = DateTimeFormat.forPattern("E, d MMM yyyy HH:mm:ss z");
DateTimeFormatter FMT3 = DateTimeFormat.forPattern("E, d MMM yyyy HH:mm:ss z Z");

并将其添加到您的html

.centre {
  text-align: center
}

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

Answer 6

您可以使用text-align: center

以下是StackBlitz（从“材料”文档调整）的示例

Answer 7

尝试一下，对我有用。

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

Answer 8

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

<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 9

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

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

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

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

Answer 10

尝试使用类 text-center

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

如何居中Angular Material表列标题和Mat-Cell内容

10 个答案: