layout - 如何在 amp-story 的上三分之一处居中文本？

Question

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

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

网格区域

• 网格区域=“上三分之一”
• 网格区域=“中间三分之一”
• 网格区域=“下三分之一”

示例代码

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