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小提琴： http://jsfiddle.net/a4jmB/

.container {
    text-align: center;
}

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

.container h1 {
    text-align: center;
}

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

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

Answer 2

如果它们的两个布局都允许它们跨越您希望它们居中的空间，则两者都可以工作。如果<h1>已应用float:left;，则将text-align: center;添加到容器不会使元件居中;在这种情况下，您需要将width:100%; text-align:center;添加到实际的<h1>元素中。

Answer 3

它适用于所有块元素，不会通过float或display更改。在特定情况下，如果.container中有任何其他内容不应居中，则很重要。然后你应该使用第二个代码。即使你想扩展你的代码，它仍然是因为它是一个更干净的代码。

Answer 4

CSS中的text-align属性用于对齐块元素的内部内容。 css-tricks

＆lt; H1＆GT;默认情况下，element为block level element。因此，它将填充所有可用宽度，通常从新行开始。

<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<head>
    <style>
      h1 { text-align:center;}
    </style>
<head>
<body>
    <div class="container">
        <h1>This is a centered header.</h1>
    </div>
</body>
<html>

正如其他一些答案已经提到的那样，请注意，在将“text-align：center”属性和值应用于任何元素时，所有子元素都将继承属性 “text-align” ，值为 center ，除非特别取消设置。

W3C Inherited-property Values

例如：

<style>
.container {text-align:center;}
</style>
<div class="container">
    <h1>This is a centered header.</h1>
    <h4>All of the other content on your site</h4>
    <p>Will be centered, because it falls within the .container </p>
    <ul>
        <li>Including:</li> 
        <li>nested elements</li>
    </ul>
</div>

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

4 个答案: