web-dev-qa-db-ja.com

angularマテリアルでマットカードを中央揃えする方法は？

angularマテリアルを使用して設計したログインカードを持っています。ページで実行すると、コンテンツがページの左側に貼り付けられます。

flexとlayout-align="center center"を使用してみましたが、カードをページの中央に配置できません

何が悪いのですか？

これが私のhtmlです：

<mat-card class="example-card" layout="row" layout-align="center center">
  <mat-card-header>
    <div class="login-box-header" layout="row" layout-align="center center">
        <img src="https://image.ibb.co/hDqa3p/codershood.png">
    </div>
  </mat-card-header>
  <mat-card-content>
    <form class="example-form">
      <table class="example-full-width" cellspacing="0">
        <tr>
          <td>
            <mat-form-field class="example-full-width">
            <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
        <td><mat-form-field class="example-full-width">
          <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>

そして、これはまだ中央揃えされていないコンテンツです：

enter image description here

htmlcssangularangular-material
5
Chief Madog

以下のcssメソッドを試してください。

  1. 最初の方法。

    .example-card {display：inline-block; }

次に、「マットカード」用のカバーdivを1つ作成します。 "mat-card-cvr"のようなカバーdivのクラス名を指定します。

.mat-card-cvr{
   width: 100%;
   text-align:center;
}

2.二番目の方法。

.example-card{
    margin: 0 auto;
    width: 40%;
}

  1. 第三の方法。

    .example-card {margin：0 auto;幅：40％;表示：インラインブロック;垂直方向に揃える：中央; }

次に、「マットカード」用のカバーdivを1つ作成します。 "mat-card-cvr"のようなカバーdivのクラス名を指定します。

 .mat-card-cvr{
       width: 100%;
       height: 500px;
       line-height: 500px;
       text-align: center;
    }

  1. 4番目の方法。

    .mat-card-cvr {top：50％;幅：100％; text-align：center;位置：固定; }

    .example-card {margin：0 auto;表示：インラインブロック; }

1
stalinrajindian