如何在有角的材料中居中放置垫卡?

时间:2018-10-14 06:25:30

标签: html css angular angular-material

我有一个使用棱角材料设计的登录卡,每当在页面上运行该登录卡时,内容都会粘贴在页面左侧。

我尝试使用flexlayout-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

5 个答案:

答案 0 :(得分:4)

使用非常简单的Flex修复了该问题

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

并用类包装所有内容

<!-- 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>

答案 1 :(得分:2)

这让我很惊讶:

.btn-center{
   margin: 0 auto;
   display: flex;
}

答案 2 :(得分:1)

请尝试以下CSS方法。

  1. 第一种方式。

    .example-card {     显示:行内块; }

然后为“ mat-card”创建一个封面div。给封面div命名一个类名称,例如“ mat-card-cvr”。

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

2。第二种方式。

.example-card{
    margin: 0 auto;
    width: 40%;
}
  1. 第三种方式。

    .example-card {         保证金:0自动;         宽度:40%;         显示:inline-block;         垂直对齐:中间;         }

然后为“ mat-card”创建一个封面div。给封面div加上一个类名,例如“ mat-card-cvr”。

 .mat-card-cvr{
       width: 100%;
       height: 500px;
       line-height: 500px;
       text-align: center;
    }
  1. 第四种方式。

    .mat-card-cvr { 最高:50%; 宽度:100%; text-align:center; 位置:固定 }

    .example-card { margin:0自动; 显示:行内块; }

答案 3 :(得分:0)

Material 提供了 mat-grid-list 来排列行和列。 像这样使用它:

<mat-grid-list cols="1" rows="1" rowHeight="2:1">
    <mat-grid-tile>
        <mat-card>
        Your form here
        </mat-card>
    </mat-grid-tile>
</mat-grid-list>

查看文档了解更多信息https://material.angular.io/components/grid-list/overview

答案 4 :(得分:0)

我尝试了 OP 答案,但我也必须控制宽度,所以必须在 div 内使用 div,然后使用 mat-card

.centering-div{
  display: flex;
  justify-content: center;
}

.inner-container {
  width: 80%;
  max-width: 100%;
  overflow: auto;
}
.my-card {
  max-width: 100%;
  color: rgb(63, 81, 181);
}