为什么 text-align 居中 headers？

Question

为什么 text-align: 居中 headers？ Headers 是块元素 h1、h2 等。为什么 text-align 以 header 为中心，尽管文档明确说明它不是：Docs on text-align

This property describes how inline-level content of a block container is aligned.

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

* {
    text-align: center;
}

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

Answer 1

属性 text-align 影响分配给属性的 parent 的特定 children；即内联类型children。除非被 CSS 覆盖，否则文本以及 span 和输入都是内联的。如果您需要将块级元素（水平）居中，请使用 margin:0 auto;.

Answer 2

来自CSS 2：

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

Answer 3

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

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

Why does text-align center headers?