Angular 5 Material将跨度居中到垫头单元格中答案

【问题标题】：Angular 5 Material centering a span into a mat-header-cellAngular 5 Material将跨度居中到垫头单元格中
【发布时间】：2019-03-08 10:47:40
【问题描述】：

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

进入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 不起作用，有什么方法可以实现吗？

【问题讨论】：

标签： html css angular angular5

【解决方案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>

【讨论】：