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

【问题标题】：How to Center the Content inside Mat-Card Component - Angular 6如何将 Mat-Card 组件中的内容居中 - Angular 6
【发布时间】：2018-11-08 11:08:10
【问题描述】：

我想将图像和按钮内容与垫卡的中心对齐。

已尝试使用以下 CSS 样式：证明内容：中心左边距：自动，右边距：自动左边距：50% ，右边距：50% 内容对齐：居中等等

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

卡片组件如下：

HTML

<div>
<mat-grid-list cols="6" rowHeight="250px">
    <mat-grid-tile *ngFor="let card of card" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card">
        <mat-card-header>
        </mat-card-header>
        <div>
        <mat-card-content class="dashboard-card-content">
           <img src={{card.IMGPath}}>
          <a mat-raised-button color="primary" href={{card.ButtonLink}}>{{card.ButtonLabel}}</a>
        </mat-card-content>
      </div>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

CSS

.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
  }

打字稿

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'
  },
  ];

}

这些卡片在这里被使用： HTML

<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>

使用此代码，它们呈现如下：Current Image

感谢大家的时间和耐心。

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

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

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

【讨论】：

CSS 样式 justify-content: center 对结果没有影响。我将尝试使用 Flex Layout 的方法
我会说通过注释掉任何其他样式来简化 .dashboard-card-content 类的 css。您还可以提供渲染效果的屏幕截图吗？
完全没有问题，感谢您的帮助！对此，我真的非常感激。我在原帖中添加了截图！
如果你删除/禁用类.dashboard-card你得到你想要的内容理由吗？
在屏幕上呈现与使用 justify-content: center 的屏幕截图完全相同的方式。我可以确认它在保存更改后正在编译。所以这种行为对我来说似乎很奇怪。