angular - 如何将 Angular Material 表列标题及其 mat-cell 内容居中

Question

谁能告诉我如何将 mat 表格列标题居中，其内容是我的 html 代码

<div fxFlex fxLayout='column' fxLayoutAlign='center center'>
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>

    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">


        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
            <td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
        </ng-container>


        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

在小屏幕上得到这样的结果

并且在大屏幕上

标签： angularangular-material

Answer 1

将以下样式添加到您的全局styles.scss文件中：

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

工作堆栈闪电战示例