我是Flex Layout的新手,刚刚开始研究如何使用带有柔性布局的角度材料。
我使用角度材质在角度2中实现了一个简单的登录表单。我想使用带有角度材质的flex布局。
我使用了mat-card,其中我已经对齐了我的表单元素。但是我想把mat-card放在窗口的中央。
这是我的代码
<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 </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 </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>
mat-card{
width: 350px;
height: 400px;
align-self: center;
}
.form-row{
display: flex;
}
.form-row input{
flex: 1;
}
有人可以告诉我如何将我的垫卡放在我的屏幕中央..?
答案 0 :(得分:3)
<div fxLayout="row" fxLayoutAlign="center center">
<mat-card fxFlex> </mat-card>
</div>
您可能还需要添加
:host {
display: block;
height: 100%;
}
答案 1 :(得分:2)
尝试添加display:block; margin-left:auto;保证金右:自动;到css中的mat-card类并删除align-self属性,如下所示:
mat-card{
width: 350px;
height: 400px;
display: block;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}
答案 2 :(得分:0)
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;
}