Заголовок таблицы материалов центра и ее ввод в угловых

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