CSS 中的文本居中 weird/misplaced

Question

我正在做的项目有一部分需要文本居中，但是当我使用 text-align:center; 时会发生这种情况

学校项目的托管脱离了独立学习文本的内联。

Answer 1

请注意，在下面的示例中，两个容器的 width 样式是相同的。

body {
  background-color: black;
}
.first {
  width: 400px;   /* the widht style of the first container is set to 400px. */
  text-align: center;
  border: 1px solid red;
  color: white;
}
.second {
  width: 400px;   /* the widht style of the second container is set to 400px. */
  text-align: center;
  border: 1px solid blue;
  color: white;
}

<body>
  <div class="first">
    <h1>Independent Study</h1>
  </div><br>

  <div class="second">
    <h3>Hosting for school projects</h3>
  </div>
</body>

CSS 中的文本居中 weird/misplaced

Centering weird/misplaced for text in CSS

html

css

display