中心物料表标题及其在Angular中的输入

Question

我有一个问题，与这里提出的其他有关将材料标头居中对齐的问题有些不同，但是到目前为止，我似乎无法使CSS正常工作。

这是我的问题：我想使列与ng容器中的输入对齐在中心，该容器用作每列的过滤器。到目前为止，我无法使其正常工作，这是我的HTML以及我为CSS尝试的内容。

::ng-deep .mat-header-container {
  justify-content: center;
}

.title-center {
  margin: 0 auto;
}

td {
  text-align: center;
}

.mat-cell, .mat-header-cell {
  border: 1px solid grey;
  padding: 5px;

}

.mat-header-cell {
  font-size: 15px;
  height: 50px;
  width: 9%;
  color:black;
  background-color: #f1f1f1;
  display:flex;
  justify-content:flex-end;
}

<div>
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
      <!-- 1st Column -->
      <ng-container matColumnDef="business_unit">
        <th mat-header-cell *matHeaderCellDef> Business Unit
          <div>
            <mat-form-field>
              <input matInput class="form-field" [formControl]="business_unitFilter" placeholder="">
            </mat-form-field>
          </div>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.business_unit}} </td>
      </ng-container>

      <!-- 2nd Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name
          <br>
            <mat-form-field>
              <input matInput class="form-field" [formControl]="nameFilter" placeholder="">
            </mat-form-field>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[20, 5, 10, 50, 100]" showFirstLastButtons></mat-paginator>

  </div>

这是我的列看起来像atm的样子（我试图将两个列的名称与过滤器输入一起居中）

Answer 1

尝试

mat-cell {
  display: flex !important;

  justify-content: center !important;
}

mat-header-cell {
  color: #4c2929;
  font-size: 1.3vw;
  display: flex;
  justify-content: center;
}