[英]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.我有一个使用角材料设计的登录卡,每当我在页面上运行它时,内容都会粘在页面的左侧。
I tried using flex
and using layout-align="center center"
but I still cannot bring the card to the center of the page我尝试使用flex
并使用layout-align="center center"
但我仍然无法将卡片带到页面的中心
What am I doing wrong ?我究竟做错了什么 ?
Here is my html:这是我的 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:这是内容仍未居中:
Fixed it by using Very simple Flex通过使用非常简单的 Flex 修复它
.main-div{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
and wrapping everything with a class并用一个类包装所有东西
<!-- 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>
Please try below css methods.请尝试以下 css 方法。
.example-card{
display:inline-block;
}
Then create one cover div for "mat-card".然后为“mat-card”创建一个封面div。 Give a class name for cover div like "mat-card-cvr".为封面 div 指定一个类名,如“mat-card-cvr”。
.mat-card-cvr{
width: 100%;
text-align:center;
}
2.second way. 2.第二种方式。
.example-card{
margin: 0 auto;
width: 40%;
}
.example-card{
margin: 0 auto;
width: 40%;
display: inline-block;
vertical-align: middle;
}
Then create one cover div for "mat-card".然后为“mat-card”创建一个封面div。 Give a class name for cover div like "mat-card-cvr".为封面 div 指定一个类名,如“mat-card-cvr”。
.mat-card-cvr{
width: 100%;
height: 500px;
line-height: 500px;
text-align: center;
}
.mat-card-cvr{
top:50%;
width:100%;
text-align:center;
position:fixed;
}
.example-card{
margin:0 auto;
display:inline-block;
}
This did the wonder to me:这让我感到惊奇:
.btn-center{
margin: 0 auto;
display: flex;
}
Material provided mat-grid-list to arrange rows and columns.材料提供 mat-grid-list 来排列行和列。 use it like this:像这样使用它:
<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>
See docs for more info https://material.angular.io/components/grid-list/overview有关更多信息,请参阅文档https://material.angular.io/components/grid-list/overview
I tried OP answer but I have to control width too, so had to use div inside div and then mat-card我试过 OP answer 但我也必须控制宽度,所以必须在 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.