Question

为什么text-align：center headers？标题是块元素h1，h2等。为什么text-align会集中标题，即使文档明确指出它不是：Docs on text-align

此属性描述块容器的内联级内容是对齐的。

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

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

* {
    text-align: center;
}

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

Answer 1

来自CSS 2：

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

Answer 2

Like everyone else has already explained, it is centering the text content inside the header element. I'd just like to add that you can easily test this by adding a border or background to elements. If you do this, you'll notice that the header will span the entire width of its container by being a block element, and the text will only be centered inside that block.

(Alternatively, you could use an inspector to show the actual space an element is occupying)

Answer 3

属性class PromoRule < ActiveRecord::Base has_many :promo_codes end会影响已分配属性的父级的特定子级;即直插型儿童。除非CSS被其他方式覆盖，否则文本是内联的，以及跨度和输入。如果需要居中一个块级元素（水平），请使用text-align。

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

3 个答案: