Question

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

我如何将文本水平和垂直地居中在上方的第三网格区域？

网格区域

grid-area =“上三分之一”
grid-area =“中间三分之一”
grid-area =“下三分之一”

示例代码

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

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

1 个答案: