本文讲解如何通过添加 text-align: center 解决 Grid 容器内段落文本（含 <br> 换行）左右不对齐、以及小屏幕下文本偏移中心的问题。

本文讲解如何通过添加 `text-align: center` 解决 grid 容器内段落文本（含 `
` 换行）左右不对齐、以及小屏幕下文本偏移中心的问题。

虽然 .about-div 使用了 display: grid 和 place-items: center，但这仅控制整个子元素（如 <h1>、<p> 标签块）在容器中的居中定位，而不控制段落内部文字的对齐方式。默认情况下，<p> 元素的 text-align 为 start（在从左向右语言中即左对齐），因此即使 <p> 整体居中，其内部多行文本（尤其是含 <br> 强制换行的段落）第二行及后续行仍会左对齐，造成视觉错位；同时，在视口变窄时，若未显式声明文本对齐，浏览器会按内容自然流排版，导致文字“挤向左侧”而非保持居中换行。

✅ 正确解法是为段落文本显式设置内联对齐方式：

.about-div p {
  margin-bottom: 1rem;
  text-align: center; /* ✅ 关键修复：使段内所有行均居中对齐 */
}

⚠️ 注意事项：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• place-items: center 作用于网格项（item）层级，不影响项内部的内容流（inline content）；
• <br> 仅强制换行，不改变当前行的对齐逻辑，因此必须由 text-align 统一控制；
• 若需增强响应式健壮性，可补充最大宽度限制与内边距适配：

.about-div {
  display: grid;
  place-items: center;
  margin-top: 7.5rem;
  padding: 0 1.5rem; /* 替代固定左右 margin，更适应小屏 */
}

.about-div p {
  margin-bottom: 1rem;
  text-align: center;
  max-width: 80ch; /* 防止单行长文本溢出或阅读体验过差 */
}

这样，无论是否含 <br>，也无论窗口宽窄，所有段落文字都将严格居中显示，且换行后各行保持一致对齐，实现真正意义上的视觉居中。

立即学习“前端免费学习笔记（深入）”；