содержимое внутри мат-карты не центрируется с помощью flex

Question

Я использую угловые материалы для показа карты, я хочу, чтобы содержимое внутри карты было центрировано по горизонтали, даже если я добавляю `justify-content: flex-start;он не делает содержимое внутри карты горизонтальным по отношению друг к другу, он всегда держится слева

, вот мой HTML

<!-- Classes main-div and example-card are categorised in .css file -->
<div class="main-div">
  <mat-card class="example-card">
    <mat-card-header>
      <div class="login-box-header">
          <!-- Src image is temporary hosted in image.ibb-->
          <img src="https://image.ibb.co/hDqa3p/codershood.png">
      </div>
    </mat-card-header>
    <mat-card-content>
      <form>
        <table>
          <tr>
            <td>
              <mat-form-field>
              <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
              </mat-form-field>
            </td>
          </tr>
          <tr>
          <td><mat-form-field>
            <input matInput placeholder="Password" [(ngModel)]="password"type="password" name="password" required>
          </mat-form-field></td>
        </tr></table>
      </form>
      <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button (click)="login()" color="primary">Login</button>
    </mat-card-actions>
  </mat-card>

</div>

, а вот мой CSS-файл:

.example-card {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.main-div{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Я использую угловые материалы, в угловом формате.

Как я могу центрировать содержимое внутри карты?

Спасибо

Answer 1

Вы можете попробовать что-то вроде:

.example-card * {
  align-self: center;
}

:)