如何让标题居中 CSS?

How can I center a headline in CSS?

这里的新手有一个简单的(毫无疑问是愚蠢的)问题。

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

h1 {
     text-align: center;
}

标题仍然靠左。

在做了一些挖掘之后,我尝试了这个:

h1 {
     margin: 0 auto;
}

仍然没有运气。然后我尝试将标题放入 ID 为 "headline":

的 DIV
#headline {
     text-align: center;
}

而且,当仍然无效时,我尝试了:

#headline {
     margin: 0 auto;
}

运气不好。

然后我看到了之前关于在 CSS 中居中 DIV 的讨论。一位发帖人说 "a element fills 100% of parent element's width. If you want to center it, then the first thing you have to do is make it less than 100% wide. So set a width on the div, 200px or something."

当我尝试时

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

什么都没发生。

但是当我尝试时:

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

标题确实移到了中间。问题是,它并没有完全居中。

我试过调整宽度。这对某些人有帮助,但是当我将 window 变大或变小时,标题不再居中。

有什么建议吗?

如有任何不慎失礼(这是我第一次发帖),请提前致歉。谢谢你的帮助。

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

参见 JSFiddle.net 上的 this example

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

h1 {
     text-align: center;
}
<h1>Centered Headline</h1>

默认情况下,这将居中:

h1 {
     text-align: center;
}
<h1>Test</h1>

虽然它可能有多种表现方式,但最有可能的候选者是您在代码的其他地方设置了 h1 { display: inline }(或 block 以外的其他内容)。尝试给 h1 背景颜色或 outline: 2px solid #0f0 以查看布局边界的位置。

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