如何将 Angular 材质按钮放置在特定位置？答案

【问题标题】：How do I place an Angular material button at a particular position?如何将 Angular 材质按钮放置在特定位置？
【发布时间】：2022-02-09 03:07:57
【问题描述】：

我想在 mat-grid-tile 的底部中心放置下面的按钮，我该怎么做？

.html 文件：

<mat-grid-list cols="1" rowHeight="400">
  <mat-grid-tile class="example-grid" >
    <div class="button">
      <button mat-button (click)="getQuestions()" routerLink="questions/getAllQuestions" routerLinkActive="active"><strong>Show!</strong> </button>
    </div>
</mat-grid-tile>
  <mat-grid-tile>...</mat-grid-tile>
</mat-grid-list>

.css 文件：

.button{
  display: table-cell;
  width: 700px;
  color: rgb(0, 0, 0);

}

【问题讨论】：

标签： html css angular user-interface angular-material

【解决方案1】：

我喜欢将flexbox 实用程序用于这类事情。在您的情况下，您首先需要确保 button div 填充了网格图块的整个高度/宽度。然后就可以使用flexbox来定位div里面的内容了。

.button {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

这是一个stackblitz 演示

【讨论】：

【解决方案2】：

您可以为此使用一点 CSS Flexbox。

.button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-end;
}

然后您的<button> 将与其容器的底部中心对齐。在此 Playground 上玩一下 Flexbox，以使其变得更好。

【讨论】：