Как мне центрировать текст в верхней трети истории?

Question

проблема - текст, назначенный верхней трети области сетки усилителя, появляется в верхнем левом углу. Я хочу, чтобы текст появлялся в середине сетки верхней трети.

Как бы я центрировал текст по горизонтали и вертикали в верхней трети области сетки?

области сетки

• сеточная площадь ="верхняя третья"
• сетки площадь ="средняя третья"
• сеточная площадь ="нижний третья"

образец кода

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

Answer 1

Вы можете использовать align-self а также justify-self атрибуты, а именно:

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