文本对齐：中心不起作用 [英] text-align: center not working
问题描述
我尝试搜索答案，但是没有任何效果。我正在尝试对齐段落。我很确定没有什么可以覆盖CSS中的代码。以下是HTML和CSS：
I have tried searching for answers but nothing worked. I am trying to align a paragraph. I am pretty sure nothing is overwriting code in CSS. Here is the HTML and 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>
什么是在这里错了吗？
What is the mistake here?
推荐答案
text-align：center 会影响纯文本节点以及具有 display：inline; 或 display：inline-block; 的子元素。您的假定子元素是 h1 ，默认情况下，该元素具有 display：block; 。因此，即使允许在 p 中包含 h1 ，这仍然行不通（例如，如果您将< p id = center> 替换为< div id = center> 您仍然会遇到无效居中）。
text-align: center affects pure text nodes as well as child elements that have display: inline; or display: inline-block;. Your assumed child element is h1 which by default has display: block;. So even if it were allowed to have an h1 inside a p, this still wouldn't work (for example if you replaced the <p id="center"> by a <div id="center"> you'd still run into "non-working" centering).
p 只能有所谓的 短语内容 ，
p can only have so-called phrasing content, that is, only certain elements are allowed as child elements inside a paragraph.
任何流内容元素的使用（例如 h1 ）会导致自动包围 p 标记。因此，这就是您的浏览器真正呈现的内容：
Usage of any flow content elements (like e.g. h1) results in automated closing of the "surrounding" p tag. So this is what your browser really renders:
<div id="main">
<p id="center"> </p>
<h1> TEST </h1>
</div>
最后一件事，因为您说自己是前端事务的初学者：
One last thing, because you said that you're a beginner in frontend matters:
请勿在CSS中使用 #id 选择器。始终改用CSS .class es。当您进行了更多的改进时，请在此处阅读原因： http://oli.jp/2011/ids/
Do not use #id selectors in CSS. Always use CSS .classes instead. When you've progressed alot more, read about the why here: http://oli.jp/2011/ids/
这篇关于文本对齐：中心不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
