HTML & CSS文本对齐异常求助：<br>段落及窗口缩放错位问题

问题分析 #

你遇到的两个问题根源在于：

1. place-items: center 仅让网格子元素（h1、p）在单元格内水平居中，但段落文本默认左对齐，导致<br>换行后的文本无法保持居中。
2. 固定的margin-left/right: 5rem在窗口缩小时，会挤压容器空间，导致文本换行前出现偏移，无法维持居中布局。

解决方案 #

修改CSS代码如下：

.about-div {
  display: grid;
  place-items: center;
  margin-top: 7.5rem;
  /* 替换固定边距，实现自适应水平居中 */
  max-width: calc(100% - 10rem);
  margin-left: auto;
  margin-right: auto;
  /* 让容器内所有文本默认居中 */
  text-align: center;
}

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

.about-div p {
  margin-bottom: 1rem;
  /* 可选：限制段落最大宽度，优化阅读体验 */
  max-width: 800px;
}

关键修改说明 #

• text-align: center：给容器添加这个属性后，所有子元素（h1、p）的文本会继承居中对齐，包括<br>换行后的第二行文本，彻底解决局部左对齐问题。
• 替换固定边距为max-width + margin:auto：固定边距在小屏幕会导致容器宽度被过度挤压，改用max-width限制容器最大宽度，同时margin:auto让容器始终水平居中，窗口缩小时文本会自然换行，不会出现偏移。
• 可选的段落max-width：如果希望段落文本不要太宽（提升可读性），可以给p标签设置max-width，配合默认继承的margin:auto让段落本身也在容器内居中。

内容的提问来源于stack exchange，提问作者Heelyx23