如何将Mat-Card组件中的内容居中 - Angular 6

时间:2018-05-29 18:04:40

标签: angular angular-material2

我想将图像和按钮内容对齐到mat-card的中心。

尝试使用以下CSS样式: 辩解内容:中心 margin-left:auto,margin-right:auto 保证金左:50%,保证金权利:50% content-align:center 等

我尝试了Andrew Lobban提供的所有解决方案。我非常感谢他耐心寻求与我一起找到解决方案。

卡组件如下:

HTML

.grid-container {
    margin: 20px;
  }

  .dashboard-card {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    max-width: 150px;
    min-width: 150px;
  }

.dashboard-card-content {
    justify-content: center
  }

CSS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-property-management',
  templateUrl: './property-management.component.html',
  styleUrls: ['./property-management.component.css']
})
export class PropertyManagementComponent {

  card = [{ 
    title: 'Capital Control', cols: 1, rows: 1, 
    IMGPath: 'redacted' ,
    ButtonLabel:'Capital Control',
    ButtonLink:'redacted'
  },
  { 
    title: 'New Entity', cols: 1, rows: 1, 
    IMGPath: 'redacted' ,
    ButtonLabel:'New Entity',
    ButtonLink:'redacted'
  },
  ];

}

打字稿

<div class="grid-container">
  <h3 class="mat-h3">Property Management</h3>
  <mat-divider></mat-divider>
  <app-property-management></app-property-management>
  <h3 class="mat-h3">Information Technology</h3>
  <mat-divider></mat-divider>
  <app-information-technology></app-information-technology>
</div>

这里使用的是: HTML

getCredentials

使用此代码,它们呈现如下:Current Image

感谢大家的时间和耐心。

1 个答案:

答案 0 :(得分:2)

似乎您正在寻找CSS样式justify-content: center。这将把您的内容集中在Mat-Card-Content中。

我确信有很多方法可以做到这一点,但我使用它或者使用@ angular / flex-layout以及fxLayout="row"(或列)fxLayoutAlign="center"属性。

enter image description here