html - 最大宽度和自动换行 : break-word causing text to be aligned to the left

Question

我是 HTML 和 CSS 的新手，所以我可能会解释得很糟糕，但我开始了。基本上，我试图通过使用自动换行和 500 像素的最大宽度使该段落不会延伸到整个页面。它有效，但会导致我的文本向左对齐，而不是像我想要的那样居中。有人知道解决办法吗？

.para {
  text-align: center;
  max-width: 500px;
  word-wrap: break-word;
}

<div class="div">
    <hr/>
   <main>
      <img src=""  width="400" height="400"/>
      <h1>AAAAAA</h1>
      <section>
        <h2>About me</h2>
        <p class="para">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

Answer 1

要用宽度包裹，您必须在 .para 类 CSS 中添加 overflow-wrap: break-word;。

像这样:

.para {
  text-align: center;
  max-width: 500px;
  overflow-wrap: break-word;
}

如果您希望段落位于页面/屏幕的中心，我在我的代码中尝试过它并且文本正确居中。您可以在 .para 类 CSS 中添加 margin: 0 auto;。

另外，一个小技巧是不要将类命名为“div”，而是使其成为更好的类名，例如 wrapper 或与您的部分相关的其他名称。