除非设置为100％，否则h2元素不会保持居中

Question

这对我来说似乎应该是一个非常简单的问题，尽管我无法自己解决这个问题。我有一个h2元素，我想保持85％，它包含一小段文字。我希望它以包含div为中心，而不仅仅是将文本置于h2元素的中心。 这是一些代码：

<div class="main">
  <div class="secondary">
      <h2>Three words of text</h2>
  </div>
</div>

CSS：

div.main{
  text-align:center
}
div.secondary{
  text-align:center
}
h2{
  text-align:center
  width:85%
}

我也提了Fiddle

感谢任何可以提供帮助的人。

Answer 1

首先，您缺少属性中的分号。这使得css解析器跳过解析剩余的属性。

另一方面，有几种方法可以做到这一点，但由于你已经有一个固定的宽度，试试这个：

h2 {
  text-align:center;
  width:85%;
  margin: 0 auto;
}

Answer 2

添加：

margin: 0 auto;

到h2样式规则。

http://jsfiddle.net/wF57b/1/

Answer 3

text-align属性将容器中的文本居中（在本例中为h2）。

您不希望对齐文本本身，而是h2容器。因此，您应该使用text-align: center;，而不是使用margin: auto。 Here是你更新的jsFiddle。