I have the following code:
<mat-grid-list cols="2">
<mat-grid-tile>
<h1 >Heading</h1>
<span >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?
CodePudding user response:
You can put the <h1> and the <span> in an extra div like so:
<mat-grid-tile>
<div>
<h1 >Heading</h1>
<span >Span Text</span>
</div>
</mat-grid-tile>
and remove the display: block ;)