[SOLVED] How do I center text in the upper third of amp-story?

How do I center text in the upper third of amp-story?

the problem - text assigned to the upper third of an amp-story grid-area appears in the upper left hand corner. I want the text to appear in the middle of the grid of the upper third.

How would I center the text horizontally and vertically in the upper third grid area?

grid areas

grid-area="upper-third"
grid-area="middle-third"
grid-area="lower-third"

sample code

<amp-story-grid-layer template="thirds">
  <h1 grid-area="upper-third">element 1</h1>
  <p grid-area="lower-third">element 2</p>
</amp-story-grid-layer>

Solution

You can use the align-self and justify-self attributes, as follows:

<amp-story-grid-layer template="thirds">
  <h1 grid-area="upper-third" align-self="center" justify-self="center">element 1</h1>
  <p grid-area="lower-third" align-self="center" justify-self="center">element 2</p>
</amp-story-grid-layer>