如何在特定位置放置 Angular material 按钮？

Question

我想在 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);

}

Answer 1

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

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

然后您的 <button> 将与其容器的底部中心对齐。在这个 Playground 上尝试使用 Flexbox 以取得更好的效果。

Answer 2

我喜欢使用 flexbox 实用工具来处理这类事情。在您的情况下，您首先需要确保 button div 填满了网格图块的完整 height/width。然后你可以使用 flexbox 将内容定位在 div.

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

这里有一个stackblitz演示

如何在特定位置放置 Angular material 按钮？

How do I place an Angular material button at a particular position?

html

css

user-interface

angular-material

angular