html - mat-card 中的内容未使用 flex 居中

Question

我正在使用棱 Angular Material 来展示卡片，我希望卡片内的内容水平居中，即使我添加`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;
}

我正在使用 Angular Material ， Angular 。

我怎样才能将卡片中的内容居中？

谢谢

Answer 1

你可以试试:

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

:)