如何在 CSS 中将标题居中？ [关闭]答案

【问题标题】：How can I center a headline in CSS? [closed]如何在 CSS 中将标题居中？ [关闭]
【发布时间】：2016-02-19 09:31:07
【问题描述】：

这里有一个简单的（无疑是愚蠢的）问题的新手。

我正在尝试使标题居中。我尝试在 CSS 中使用 text-align 属性，但无济于事：

h1 {
     text-align: center;
}

标题仍向左对齐。

在做了一些挖掘之后，我尝试了这个：

h1 {
     margin: 0 auto;
}

仍然没有运气。然后我尝试将标题放入 id 为“headline”的 DIV：

#headline {
     text-align: center;
}

而且，当这仍然不起作用时，我尝试了：

#headline {
     margin: 0 auto;
}

运气不好。

然后我遇到了之前关于在 CSS 中居中 DIV 的讨论。一个海报说“一个元素填充了父元素宽度的 100%。如果你想将它居中，那么你要做的第一件事就是让它的宽度小于 100%。所以在 div 上设置一个宽度，200px 或其他东西。”

当我尝试时

#headline {
     width: 1200px;
     margin: 0 auto;
}

什么都没发生。

但是当我尝试时：

#headline {
     width: 1200px;
     text-align: center;
}

标题确实移到了中心。问题是，它不是完全居中的。

我试过调整宽度。这对一些人有帮助，但是当我将窗口放大或缩小时，标题不再居中。

有什么建议吗？

对于任何不慎的faux pas提前致歉（这是我第一次发帖）。谢谢你的帮助。

【问题讨论】：

【解决方案1】：

默认情况下，这将居中：

h1 {
     text-align: center;
}

&lt;h1&gt;Test&lt;/h1&gt;

虽然它可能以多种方式发挥作用，但最有可能的是您在代码的其他位置设置了h1 { display: inline }（或block 以外的其他内容）。尝试为h1 提供背景颜色或outline: 2px solid #0f0 以查看布局边界的位置。

Firefox 和 Chrome 也有很棒的开发者工具，所以检查 h1 会告诉你所有样式的来源。您可以检查并取消选中样式，直到找到罪魁祸首。

【讨论】：

【解决方案2】：

您发布的第一个 CSS 工作正常，如果不是，您必须有一些其他 CSS 覆盖它。

h1 {
     text-align: center;
}

&lt;h1&gt;Centered Headline&lt;/h1&gt;

【讨论】：

【解决方案3】：

只需设置宽度100% 而不是固定的像素宽度。这是默认值（对于像<h1> 这样的块元素，但您必须更改了某些内容。）这将使它成为动态的。

请参阅 JSFiddle.net 上的 this example。

【讨论】：