文本未正确对齐（HTML 和 CSS）

Question

我正在制作一个网站，但我遇到了一些文本在 div 中未正确对齐的问题。 这是代码：

.about-div {
  display: grid;
  place-items: center;
  margin-top: 7.5rem;
  margin-left: 5rem;
  margin-right: 5rem
}

.about-div h1 {
  margin-bottom: 1rem;
}

.about-div p {
  margin-bottom: 1rem;
}

<div class="about-div">
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at risus lobortis, tristique felis in, tempor magna.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at risus lobortis, tristique felis in, tempor magna.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum</p>
</div>

问题在于，有

<br>

的段落中的第二句话是左对齐的。
此外，当您缩小浏览器窗口的宽度时，文本会在换行之前向左移动，而不是保持与中心对齐。 有谁知道如何解决这个问题吗？

Answer 1

您应该更新 CSS 代码并添加 .about-div p 选择器。修改如下：

.about-div p {
 text-align: center;
 }

就完成了。