Angular 5 Material 将 span 居中放置在 mat-header-cell 中

Question

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

进入 mat-header-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 显示在单元格的左中角，尝试了 text-align:center; left:0px; 和 padding-top: 25%; padding-bottom: 25%（在我的 span 元素内）但是那些 css没用，有什么方法可以实现吗？

Answer 1

找到将 css 添加到 mat-header-cell -> display: flex; align-items: center;

的解决方案

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

Angular 5 Material 将 span 居中放置在 mat-h​​eader-cell 中

Angular 5 Material centering a span into a mat-header-cell

html

css

angular

angular5

Angular 5 Material 将 span 居中放置在 mat-header-cell 中