如何让标题居中 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
将告诉您所有样式的来源。您可以浏览并取消选中样式,直到找到罪魁祸首。
这里的新手有一个简单的(毫无疑问是愚蠢的)问题。
我正在尝试将标题居中。我尝试在 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
将告诉您所有样式的来源。您可以浏览并取消选中样式,直到找到罪魁祸首。