我试图寻找答案，但没有任何效果。我正在尝试对齐段落。我很确定没有什么可以覆盖CSS中的代码。这是HTML和CSS：
body {
background-image: url("../../images/pic01.jpg");
background-repeat;
}
#main {
background-color: rgb(255, 84, 0);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
overflow: auto;
height: 100%;
color: rgb(255, 255, 255);
}
#center {
text-align: center;
}<body id="top">
<div id="main">
<p id="center">
<h1> TEST </h1>
</p>
</div>
</body>这是什么错误？
text-align: center影响纯文本节点以及具有display: inline;或的子元素display: inline-block;。您假定的子元素h1默认为display: block;。因此，即使允许h1内部包含p，这仍然行不通（例如，如果将替换为<p id="center">，则<div id="center">仍然会遇到“无效”居中）。
p只能具有所谓的短语内容，即在段落内仅允许某些元素作为子元素。
使用任何流内容元素（例如h1）都会导致自动关闭“周围”p标签。这就是您的浏览器真正呈现的内容：
<div id="main">
<p id="center"> </p>
<h1> TEST </h1>
</div>
最后一件事，因为您说过您是前端方面的初学者：
不要#id在CSS中使用选择器。始终改用CSS .classes。当您取得更多进步时，请在此处了解原因：http : //oli.jp/2011/ids/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句