html - h2 元素不会保持居中，除非它设置为 100%

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%
}

我也做了一个小提琴

感谢任何能提供帮助的人。

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

添加：

margin: 0 auto;

到 h2 样式规则。

于 2013-07-29T01:59:37.277 回答

score 0 · Accepted Answer

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

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

3 回答 3