为什么文本对齐中心标题？答案

【问题标题】：Why does text-align center headers?为什么文本对齐中心标题？
【发布时间】：2016-07-16 22:29:57
【问题描述】：

为什么 text-align: 居中标题？标头是块元素 h1、h2 等。为什么 text-align 中心标题即使文档明确说明它没有：Docs on text-align

此属性描述块容器的内联级内容如何已对齐。

我有点困惑，为什么它不会像 div 那样将块元素居中，但愿意将标题居中。可能是因为标题中的文本是内联的，但实际的标题本身是块元素？

* {
    text-align: center;
}

.box {
    background-color: blue; 
    width: 150px;
    height: 150px;
}

【问题讨论】：

如你所说，标题没有居中；里面的文字是。
@smarx 可以公平地说所有文本都是内联的吗？我正在寻找说明标题是块文本容器并且文本本身是内联但似乎找不到类似内容的文档。
你的问题包含了完美的答案：这个属性描述了块容器的内联内容是如何对齐的。 文本是块容器的内联内容，无论是h1、p、article、section、div 等。查看匿名内联框。

【解决方案1】：

来自CSS 2：

任何直接包含在块容器元素内（而不是内联元素内）的文本都必须被视为匿名内联元素。

【讨论】：

您的链接，除此之外，docs on DOM nodes 为我清除了它。由于 Node.ELEMENT_NODE 与 Node.TEXT_NODE 不同，因此区别对待两者是有道理的。
<p> 元素默认为display: block。过去和现在。

【解决方案2】：

就像其他人已经解释过的那样，它使标题元素内的文本内容居中。我想补充一点，您可以通过向元素添加边框或背景来轻松测试这一点。如果你这样做，你会注意到标题将作为一个块元素跨越其容器的整个宽度，并且文本只会在该块内居中。

（或者，您可以使用检查器来显示元素占用的实际空间）

【讨论】：

【解决方案3】：

属性text-align 影响分配该属性的父级的特定子级；即内联类型的孩子。除非被 CSS 覆盖，否则文本是内联的，跨度和输入也是如此。如果您需要将块级元素（水平）居中，请使用margin:0 auto;。

【讨论】：