html - `text-align: center;` 应该应用于元素或其父容器吗？

Question

我正在尝试使元素居中。

text-align: center; 应该应用于元素或其父容器吗？

鉴于此:

<div class="container">
    <h1>This is a centered header.</h1>
</div>

...我应该这样写吗:

.container {
    text-align: center;
}

...或者这个:

.container h1 {
    text-align: center;
}

Answer 1

两者都可以。试试看——这是一个 JS fiddle : http://jsfiddle.net/a4jmB/

.container {
    text-align: center;
}

这会将父 div 中的所有文本设置为居中。

.container h1 {
    text-align: center;
}

这会将 h1 div 中的所有文本设置为居中。 基本上，无论 css 设置如何，h1 都会占据整个行宽，因此文本将居中。

不过，第二个可能更可取，因为它只适用于 h1 div，而不适用于容器中可能存在的任何其他文本。