文本对齐：中心不起作用

Question

我尝试寻找答案，但没有任何效果。我正在尝试对齐一个段落。我很确定 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>

这里有什么错误？

Answer 1

给text-align: center给#main h1，喜欢：

#main h1 {
  text-align: center;
}

Although you've used <h1> inside of <p>, which is an invalid HTML, and your browser handle it by closing the <p></p> before starting <h1>.

看看下面的代码片段：

#main h1 {
  text-align: center;
}

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;
}

<html>
    <head>
        <title>HTML PAMOKOS</title>
        <link rel="stylesheet" href="../assets/css/html.css" />
    </head>

    <body id="top">
        <div id="main">
            <p id="center"></p>
            <h1> TEST </h1>
        </div>
    </body>

</html>

希望对您有所帮助！

Answer 2

text-align: center 影响纯文本节点以及具有 display: inline; 或 display: inline-block; 的子元素。您的假设子元素是 h1，默认情况下有 display: block;。所以即使它被允许在 p 中有一个 h1，这仍然是行不通的（例如，如果你用 <div id="center"> 替换 <p id="center"> 你会仍然运行进入 "non-working" 居中）。

p只能有所谓的phrasing content，即段落内只能有某些元素作为子元素。

使用任何流内容元素（例如 h1）会导致 自动关闭 "surrounding" p 标签。这就是您的浏览器真正呈现的内容：

<div id="main">
    <p id="center"> </p>
    <h1> TEST </h1> 
</div>

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

不要在 CSS 中使用 #id 选择器。始终使用 CSS .classes 代替。 当您取得更多进步时，请在此处阅读原因：http://oli.jp/2011/ids/

Answer 3

要使 text-aling: center 起作用，您还必须传递 margin: auto 选项。

Answer 4

您的HTML无效。 <p> 不能包含 <h1>。大多数浏览器会尝试通过关闭标题前的段落，然后在其后创建另一个段落来纠正错误。

您可以删除标题或段落，然后使用 CSS 根据需要设置样式。

jsFiddle example

Answer 5

  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;
}
 

h1{
   text-align: center;
}

 <!DOCTYPE HTML>
    
    <html>
     <head>
      <title>HTML PAMOKOS</title>
      <link rel="stylesheet" href="../assets/css/html.css" />
     </head>
    
     <body id="top">
            <div id="main">
                <p id="center"> <h1> TEST </h1> </p>
            </div>
     </body>
    
    </html>

文本对齐：中心不起作用

text-align: center not working

html

css

text-align