Layout 如何将amp故事的上三分之一中的文本居中？

问题 -指定给amp故事网格区域上三分之一的文本显示在左上角。我希望文本出现在上第三的网格的中间。

如何在上第三个网格区域中水平和垂直居中文本

网格区域

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

示例代码

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

要素1
元素2

您可以使用

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>

要素1
元素2

您能在或中分享完整的代码吗？您是否要求我创建一个完整的amp故事来说明问题？您可以在这里看到如何创建amp故事