如何在角材料中居中垫卡? [英] How to center mat-card in angular materials?

问题描述

我有一个登录卡，我使用有角度的材料设计，每当我在页面上运行它时，内容都会粘在页面的左侧.

我尝试使用 flex 和 layout-align="center center" 但我仍然无法将卡片带到页面的中心

我做错了什么?

这是我的 html:

<mat-card-header><div class="login-box-header" layout="row" layout-align="center center"><img src="https://image.ibb.co/hDqa3p/codershood.png">

</mat-card-header><mat-card-content><form class="example-form"><table class="example-full-width" cellpacing="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></表单><mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner></mat-card-content><mat-card-actions><button mat-raised-button (click)="login()" color="primary">登录</button></mat-card-actions></mat-card>

这里的内容仍未居中:

解决方案

使用非常简单的 Flex 修复它

.main-div{高度:100vh；显示:弹性；对齐内容:居中；对齐项目:居中；}

并用一个类包装所有东西

<!-- 类 main-div 和 example-card 分类在 .css 文件中 --><div class="main-div"><mat-card class="example-card"><mat-card-header><div class="login-box-header"><!-- Src 图像临时托管在 image.ibb--><img src="https://image.ibb.co/hDqa3p/codershood.png">

</mat-card-header><mat-card-content><form class="example-form"><table class="example-full-width" cellpacing="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></表单><mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner></mat-card-content><mat-card-actions><button mat-raised-button (click)="login()" color="primary">登录</button></mat-card-actions></mat-card>

I have a login card that I designed using angular materials, whenever I run it on the page the content sticks to the left of the page.

I tried using flex and using layout-align="center center" but I still cannot bring the card to the center of the page

What am I doing wrong ?

Here is my 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>

and here is the content still not centered:

解决方案

Fixed it by using Very simple Flex

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

and wrapping everything with a class

<!-- Classes main-div and example-card are catagorized 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 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>

这篇关于如何在角材料中居中垫卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！