我有一个使用棱角材料设计的登录卡,每当在页面上运行该登录卡时,内容都会粘贴在页面左侧。
我尝试使用flex
和layout-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>
这里的内容仍然没有居中:
答案 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方法。
第一种方式。
.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%;
}
第三种方式。
.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;
}
第四种方式。
.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);
}