在彼此下方顯示 H1 和 Span，並在 Angular Material Mat-Grid 中居中對齊

Question

我有以下代碼：

<mat-grid-list cols="2">
  <mat-grid-tile>
    <h1 class="title">Heading</h1>
    <span class="spanText">Span Text</span>
  </mat-grid-tile>

  <mat-grid-tile>2</mat-grid-tile>
</mat-grid-list>

和css

.title {
  font-size: 50px;
}

.spanText {
  display: block;
}

我試圖在彼此下方顯示 H1 和 Span（H1 在上方，跨度在下方），同時使它們在mat-grid中居中對齊。 但是display: block什么都不做，也不會改變span的位置。 現在，它們並排在線顯示。

我怎樣才能改變這個？

Answer 1

您可以像這樣將 <h1> 和 <span> 放在額外的 div 中：

<mat-grid-tile>
  <div>
    <h1 class="title">Heading</h1>
    <span class="spanText">Span Text</span>
  </div>
</mat-grid-tile>

並刪除顯示：塊；）