无法使用 flex 布局将垫卡放置在我 window 的中心

Question

我是 Flex Layout 的新手，刚开始研究如何使用 angular material 和 flex 布局。

我在 angular 2 中使用 angular material 实现了一个简单的登录表单。我想在 angular material.

中使用 flex 布局

我使用了 mat-card，其中对齐了我的表单元素。但我想将垫卡放在 window.

的中心

这是我的代码

myform.component.html

<div fxlayout="column" style="background: white;">

<mat-card fxFlex>   
            <form  (ngSubmit)="onSubmit(user.username,user.password)" #myForm="ngForm">

                                <p style="font-size: 30x;">Space Study</p>
                                <p style="font-size: 14px;">Sign In</p>
                                <mat-input-container class="form-row">
                                    <span matTooltip="Username">
                                        <input matInput placeholder=" " id="username" [(ngModel)]="user.username" name="username">
                                    </span>
                                    <span matPrefix><mat-icon>person&nbsp;&nbsp;</mat-icon></span>
                                </mat-input-container>

                                <mat-input-container class="form-row">
                                    <span matTooltip="Password">
                                        <input matInput placeholder=" " id="password" [(ngModel)]="user.password" name="gpassword" [type]="hide ? 'password' : 'text'">
                                    </span>
                                    <span matPrefix><mat-icon>remove_red_eye&nbsp;&nbsp;</mat-icon></span>
                                </mat-input-container>

                    <button mat-raised-button color="primary" type="submit" mat-raised-button>Login</button>

                    <mat-progress-bar mode="indeterminate" *ngIf="showprogressbar"></mat-progress-bar>
            </form>

</mat-card>

</div>

myform.component.css

mat-card{
    width: 350px;
    height: 400px;
    align-self: center; 
}

.form-row{
    display: flex;
}

.form-row input{
    flex: 1;
}

这是我的输出window

谁能告诉我如何将垫卡放在屏幕中央..？

Answer 1

<div fxLayout="row" fxLayoutAlign="center center">
   <mat-card fxFlex> </mat-card>
</div>

您可能还需要添加

:host {
  display: block;
  height: 100%;
}

Answer 2

尝试添加 display:block;margin-left:auto; margin-right：自动；到 mat-card class in css 并删除 align-self 属性，像这样：

mat-card{
    width: 350px;
    height: 400px;
    display: block;
    margin-left:auto;
    margin-right:auto;  
    vertical-align:middle;
}

Answer 3

你可以这样做。

app.component.ts

<section fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px">
  <mat-card>
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
      <mat-form-field>
        <input type="text" matInput placeholder="Enter something">
      </mat-form-field>
      <mat-form-field>
        <input type="text" matInput placeholder="Enter something">
      </mat-form-field>
      <button mat-raised-button color="primary">Submit</button>
    </form>
  </mat-card>
</section>

app.component.css

mat-card {
  width: 350px;
  height: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

section {
  vertical-align: middle;
  height: 100%;
}

style.css

html,
body {
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;

}

无法使用 flex 布局将垫卡放置在我 window 的中心

Unable to position mat-card at he centre of my window using flex layout

angular-material

angular-flex-layout

angular

myform.component.html

myform.component.css

这是我的输出window