这里有一个简单(毫无疑问是愚蠢)问题的新手。
我试图将标题置于中心位置。我尝试在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;
}
标题确实转移到了中心。问题是,它并非完全集中。
我试过调整宽度。这有助于一些但是当我使窗口变大或变小时,标题不再居中。
有什么建议吗?
提前为任何无意的失礼道歉(这是我第一次发帖)。谢谢你的帮助。
答案 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。