如何将卡在角材4中居中对齐? [英] How to center align card in angular material 4?
本文介绍了如何将卡在角材4中居中对齐?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我用角材料创建了一个样角4应用程序. 我正在尝试在视图中居中放置卡片. 但是它不起作用.下面是代码
I have created a sample angular 4 application with angular material. I'm trying to center the card in the view. But its not working.Below is the code
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<router-outlet></router-outlet>
login.component.html
<div ng-cloak="" layout-fill layout="column" style="background:green" layout-align="center">
<div flex="50" layout="row" layout-align="center">
<md-card flex="50"></md-card>
</div>
</div>
login.component.ts
import { Component, OnInit } from '@angular/core';
import { MdCardModule,MdInputModule } from '@angular/material';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
推荐答案
向md-card
添加一个类,如下所示:
Add a class to the md-card
something like this:
.center{
width: 75%;
margin: 10px auto;
}
.main-div{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
html:
<div class="main-div">
<md-card class="z-depth center" flex="50" >Simple card</md-card>
</div>
这篇关于如何将卡在角材4中居中对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文