Display H1 and Span underneath each other and center aligned in Angular Material Mat-Grid

I have the following code:

<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>

And the css

.title {
  font-size: 50px;
}

.spanText {
  display: block;
}

I am trying to display the H1 and the Span underneath each other (H1 above and span below) while keeping them center aligned in the mat-grid. But the display: block does nothing and doesn’t change the position of the span. Right now, they’re being displayed in-line, right next to each other.

How can I change this?

>Solution :

You can put the <h1> and the <span> in an extra div like so:

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

and remove the display: block 😉