html – text-align：center not working

我试过寻找答案但没有任何效果.我试图对齐一个段落.我很确定没有什么能覆盖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;
}

这里有什么错误？

最佳答案

text-align：center影响纯文本节点以及具有display：inline的子元素;或显示：inline-block;.您假定的子元素是h1,默认情况下显示：block;.所以,即使它被允许在ap内部使用h1,这仍然不起作用(例如,如果你用< div id =“center”>替换< p id =“center”> d仍然遇到“非工作”中心).

p只能有所谓的phrasing content,也就是说,只允许某些元素作为段落中的子元素.

使用任何流内容元素(例如h1)导致“周围”p标签的自动关闭.这就是您的浏览器真正呈现的内容：

最后一件事,因为你说你是前端问题的初学者：

不要在CSS中使用#id选择器.始终使用CSS .classes.当你进一步发展时,请阅读这里的原因：http://oli.jp/2011/ids/