如何在有角材料中将垫子卡居中? [英] How to center mat-card in angular materials?
本文介绍了如何在有角材料中将垫子卡居中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个使用棱角材料设计的登录卡,每当在页面上运行该登录卡时,内容都会粘贴在页面左侧.
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.
我尝试使用flex
和layout-align="center center"
,但仍然无法将卡带到页面中心
I tried using flex
and using layout-align="center center"
but I still cannot bring the card to the center of the page
我在做什么错了?
这是我的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:
推荐答案
使用非常简单的Flex修复了该问题
Fixed it by using Very simple 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>
这篇关于如何在有角材料中将垫子卡居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文