如何让段落适配不同浏览器宽度？CSS布局失效求助

首先，你的核心问题是混淆了容器本身居中和容器内内容居中的CSS属性：

• text-align: center 是让容器内部的行内/行内块元素（比如文字、图片）居中对齐
• 要让块级容器（比如.content、.blog_content）本身在浏览器水平居中，需要用 margin: 0 auto，同时确保父元素（比如body）的宽度是可用的（没有被默认样式限制）

另外，浏览器默认会给body添加margin，可能会影响布局精度，建议先重置基础样式。

下面是修改后的完整代码：

修改后的CSS #

/* 重置浏览器默认的body边距，避免干扰布局 */
body {
  margin: 0;
  background-color: #f5f5f5; /* 加个浅背景方便区分容器 */
}

.content {
  width: 60%; /* 容器占浏览器宽度的60% */
  margin: 0 auto; /* 水平方向自动分配边距，实现容器居中 */
}

.blog_content {
  background-color: white;
  padding: 2rem; /* 加内边距让内容不贴容器边缘 */
  /* 父元素.content已经是60%宽度，这里无需重复设置width */
}

/* 若需要让段落文字单独居中，可添加此规则 */
.blog_content p {
  text-align: center;
}

修改后的HTML #

<section class="content">
  <div class="row">
    <div class="blog_content">
      <h2>This is the post title!</h2>
      <h3>Title description!</h3>
      <div class="photo">
        <img src="#" alt="Blog post image">
      </div>
      <p>This is the first paragraph!</p>
    </div>
  </div>
</section>

关键说明： #

• margin: 0 auto的作用：这是块级元素水平居中的标准写法，左右边距自动分配，让容器在父元素的可用空间里精准居中。
• 重置body的margin：浏览器默认给body加了8px左右的边距，会导致容器实际宽度偏离60%，重置后能保证布局精度。
• 避免重复设置width：.blog_content的父元素.content已经限定了60%宽度，子元素默认会继承这个宽度，无需重复定义。
• 内容居中的精细化控制：如果只是想让段落文字居中，单独给.blog_content p设置text-align: center即可，不用给所有容器都添加这个属性。

替换原有代码后测试，就能实现你想要的“段落所在容器占浏览器60%宽度且居中”的效果了。

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