html - Mat卡内的内容未使用flex居中

我正在使用有角度的材料来显示卡片，
我希望卡中的内容水平居中，
即使我添加`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;
}

我正在使用有角度的材料。

我如何将卡内的内容居中放置？

谢谢

最佳答案

您可以尝试类似：

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

:)

关于html - Mat卡内的内容未使用flex居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52800846/