如何将文字居中放置在 amp-story 的上三分之一处？

Question

问题 - 分配给 amp-story 网格区域上三分之一的文本出现在左上角。我希望文本出现在上三分之一的网格中间。

如何将文本水平和垂直居中放在上三分之一的网格区域？

网格区域

• 网格区域="upper-third"
• 网格区域="middle-third"
• 网格区域="lower-third"

示例代码

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