如何在角材料 4 中居中对齐卡? [英] How to center align card in angular material 4?

问题描述

我用角材料创建了一个示例 angular 4 应用程序.我试图在视图中将卡片居中.但它不起作用.下面是代码

app.component.html

<路由器插座></路由器插座>

login.component.html

<div flex="50" layout="row" layout-align="center"><md-card flex="50"></md-card>

login.component.ts

import { Component, OnInit } from '@angular/core';从'@angular/material' 导入 { MdCardModule,MdInputModule };@成分({选择器:'应用程序登录'，templateUrl: './login.component.html',styleUrls: ['./login.component.css']})导出类 LoginComponent 实现 OnInit {构造函数(){}ngOnInit() {}}

解决方案

向 md-card 添加一个类，如下所示:

.center{宽度:75%；边距:10px 自动；}.main-div{高度:100vh；显示:弹性；对齐内容:居中；对齐项目:居中；}

html:

<md-card class="z-depth center" flex="50" >简单卡片</md-card>

演示

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() {
  }

}

解决方案

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>

demo

这篇关于如何在角材料 4 中居中对齐卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！