文本对齐中心不工作

Question

我在将以下html和css的中心对齐文本时遇到了一个大问题：

HTML：

<article class="item-page">
  <p>
     text-align not working...
  </p>
</article>

的CSS：

article {
    display: table-row;
    color: #f00;
}
p{
    text-align: center;
}

demo

Answer 1

  

关键问题是因为使用了display: table-row;。

将display:table;width:100%用于它的父级，然后只有p也表现为100％宽，然后它可以使宽度居中对齐：

HTML：

<main>
<article class="item-page">
      <p>
         text-align not working...
      </p>
</article>
</main>

的CSS：

main{
    display: table;
    width: 100%;
}
article {
    display: table-row;
    color: #f00;
}
p{
    text-align: center;
}

working demo

---

为什么会这样？

因为当内容在表格布局内时，宽度根据内容宽度动态工作（即宽度为自动），设置表格为100％，确保宽度为100％。