为什么文本对齐中心标题?(Why does text-align center headers?)

为什么文本对齐:中心标题? 标题是块元素h1,h2等。 为什么文本对齐中心标题即使文档明确指出它不: 文档对齐

该属性描述了块容器的内联级内容是如何对齐的。

我有点困惑,为什么它不会像div这样的块元素居中,而是希望集中一个头部。 这可能是因为标题内的文本是内联的,但实际标题本身是一个块元素?

http://codepen.io/stephenhuh/pen/KrkLZG - codepen关于这种现象。

* { text-align: center; } .box { background-color: blue; width: 150px; height: 150px; }

Why does text-align: center headers? Headers are block elements h1,h2,etc. Why is it that text-align centers headers even though the documentation specifically says it does not: Docs on text-align

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

I'm a little confused as to why it wont center a block element like a div, but willing to center a header. Could it potentially be because text inside a header is inline, but the actual header itself is a block element?

http://codepen.io/stephenhuh/pen/KrkLZG - codepen on this phenomenon.

* { text-align: center; } .box { background-color: blue; width: 150px; height: 150px; }

最满意答案

来自CSS 2 :

任何直接包含在块容器元素(不在内联元素中)的文本都必须被视为匿名内联元素。

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

为什么文本对齐中心标题?(Why does text-align center headers?)

为什么文本对齐:中心标题? 标题是块元素h1,h2等。 为什么文本对齐中心标题即使文档明确指出它不: 文档对齐

该属性描述了块容器的内联级内容是如何对齐的。

我有点困惑,为什么它不会像div这样的块元素居中,而是希望集中一个头部。 这可能是因为标题内的文本是内联的,但实际标题本身是一个块元素?

http://codepen.io/stephenhuh/pen/KrkLZG - codepen关于这种现象。

* { text-align: center; } .box { background-color: blue; width: 150px; height: 150px; }

Why does text-align: center headers? Headers are block elements h1,h2,etc. Why is it that text-align centers headers even though the documentation specifically says it does not: Docs on text-align

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

I'm a little confused as to why it wont center a block element like a div, but willing to center a header. Could it potentially be because text inside a header is inline, but the actual header itself is a block element?

http://codepen.io/stephenhuh/pen/KrkLZG - codepen on this phenomenon.

* { text-align: center; } .box { background-color: blue; width: 150px; height: 150px; }

最满意答案

来自CSS 2 :

任何直接包含在块容器元素(不在内联元素中)的文本都必须被视为匿名内联元素。

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