html - Angular 5 Material将跨度居中到垫头单元格中

Question

在我的 angular5 应用程序中，我使用 Material 表来显示一些数据。

进入 mat-h​​eader-cell 我有一个 span 和一个 img 并试图正确对齐它们。

这是现在的样子:

这里是一段html代码:

<ng-container matColumnDef="batchState">
<mat-header-cell *matHeaderCellDef style="border: 1px solid white;"> 
    <span style="border: 1px solid white;">Batch state </span>
    <img style="border: 1px solid white;" src='../../assets/filter_list.png' (click)="filterByState()" 
        matTooltip="Filter by state" />
</mat-header-cell>
<mat-cell *matCellDef="let inst">
        {{inst.batchState}} 
</mat-cell>
</ng-container>

我想让我的 span 显示在单元格的左中 Angular ，试过 text-align:center; left:0px; 和 padding-top: 25%; padding-bottom: 25% (在我的 span 元素内)但是那些 css 不起作用，有什么办法可以实现吗？

Answer 1

解决方案发现将 css 添加到 mat-h​​eader-cell -> display: flex;对齐元素:居中；

<ng-container matColumnDef="batchState">
<mat-header-cell *matHeaderCellDef style="border: 1px solid white;display: flex; align-items: center;"> 
    <span style="border: 1px solid white;">Batch state </span>
    <img style="border: 1px solid white;" src='../../assets/filter_list.png' (click)="filterByState()" 
        matTooltip="Filter by state" />
</mat-header-cell>
<mat-cell *matCellDef="let inst">
        {{inst.batchState}} 
</mat-cell>
</ng-container>