Как центрировать контент внутри компонента Mat-Card - Angular 6 - PullRequest
Новая
       20

Как центрировать контент внутри компонента Mat-Card - Angular 6

0 голосов
/ 29 мая 2018

Я бы хотел выровнять изображение и содержимое кнопки по центру мат-карты.

Попытался использовать следующие стили CSS: justify-content: center margin-left: auto, margin-справа: автоматическое поле слева: 50%, поле справа: 50% выравнивания содержимого: по центру и т. д.

На этом этапе я попробовал все решения, предложенные Эндрю Лоббаном.Я очень благодарен за его терпение в попытке найти решение со мной.

Компонент карты выглядит следующим образом:

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>

С этим кодом они отображаются следующим образом: Текущее изображение

Спасибо всем за потраченное время и терпение.

1 Ответ

0 голосов
/ 29 мая 2018

Кажется, вы ищете стиль CSS justify-content: center.Это сосредоточит ваш контент в Mat-Card-Content.

Я уверен, что есть много способов сделать это, но я использую это, или использую @ angular / flex-layout вместе с fxLayout="row" (или столбцом) fxLayoutAlign="center" атрибутов.

enter image description here

...