小编PCo*_*ers的帖子

Angular 6(https://angular.io/)新项目,利用材料组件(https://material.angular.io/)~如何从mat-button组件导航到外部URL.

HTML

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

打字稿

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

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})

 export class MenuOverviewExample {}

现场Edtior:https://stackblitz.com/angular/maeymnkvlrq

我相信我错过了一些明显的新手,但无法找到我的问题的答案.

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

尝试使用以下 CSS 样式： justify-content: center margin-left: auto ， margin-right: auto margin-left: 50% ， margin-right: 50% content-align: center 等。

此时我尝试了 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 { …