Угловой 5 Материал центрирует промежуток в ячейке заголовка мата

Question

В моем приложении 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>

Iхотите, чтобы мой 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>