如何在CSS中标题?

时间:2015-11-17 20:45:10

标签: html css center text-align

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

我试图将标题置于中心位置。我尝试在CSS中使用text-align属性,但无济于事:

h1 {
     text-align: center;
}

标题仍然是齐平的。

经过一番挖掘后,我尝试了这个:

h1 {
     margin: 0 auto;
}

仍然没有运气。然后我尝试将标题放入ID为#34;标题"

的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;
}
标题确实转移到了中心。问题是,它并非完全集中。

我试过调整宽度。这有助于一些但是当我使窗口变大或变小时,标题不再居中。

有什么建议吗?

提前为任何无意的失礼道歉(这是我第一次发帖)。谢谢你的帮助。

3 个答案:

答案 0 :(得分:4)

默认情况下,这将居中:

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

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

Firefox和Chrome也有很棒的开发者工具,因此检查h1会显示所有样式的来源。你可以通过并取消选中样式,直到你到达罪魁祸首。

答案 1 :(得分:3)

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

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

答案 2 :(得分:2)

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

请参阅JSFiddle.net上的this example