Html 如何在角材料中居中垫卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52800054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center mat-card in angular materials?
提问by Chief Madog
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 flexand 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:
这是内容仍未居中：
回答by Chief Madog
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>
回答by stalinrajindian
Please try below css methods.
请尝试以下 css 方法。
first way.
.example-card{ display:inline-block; }
第一种方式。
.example-card{ display:inline-block; }
Then create one cover div for "mat-card". Give a class name for cover div like "mat-card-cvr".
然后为“mat-card”创建一个封面div。为封面 div 指定一个类名，如“mat-card-cvr”。
.mat-card-cvr{
width: 100%;
text-align:center;
}
2.second way.
2.第二种方式。
.example-card{
margin: 0 auto;
width: 40%;
}
Third way.
.example-card{ margin: 0 auto; width: 40%; display: inline-block; vertical-align: middle; }
第三种方式。
.example-card{ margin: 0 auto; 宽度：40%；显示：内联块；垂直对齐：中间；}
Then create one cover div for "mat-card". Give a class name for cover div like "mat-card-cvr".
然后为“mat-card”创建一个封面div。为封面 div 指定一个类名，如“mat-card-cvr”。
.mat-card-cvr{
width: 100%;
height: 500px;
line-height: 500px;
text-align: center;
}
Fourth way.
.mat-card-cvr{ top:50%; width:100%; text-align:center; position:fixed; }
.example-card{ margin:0 auto; display:inline-block; }
第四种方式。
.mat-card-cvr{顶：50%；宽度：100%；文字对齐：居中；位置：固定；}
.example-card{ margin:0 auto; 显示：内联块；}
