Question

我正在为个人博客帖子构建html和CSS模板。我的博客内容部分如下：

.content {
  text-align: center;
  width: 60%;
}

.blog_content {
  background-color: white;
  width: 60%;
}

<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="NULL">
      </div>
      <p>
        This is the first paragraph!
      </p>
    </div>
  </div>
</section>

我想让段落始终是浏览器宽度的60％并始终保持居中。但是，我的CSS代码无效 - 我尝试将text-align：center和width：60％放在我的内容部分的每个容器中，但没有任何效果。

非常感谢任何帮助!!!

Answer 1

您正在复制宽度声明。您只需要将内容宽度声明为100％，然后将其段落声明为60％：

.content {
    text-align: center;
    width: 100%;
}

.content > p {
  background-color: white;
  width: 60%;
  margin: 0 auto;
  display:block;
}

或者，最好，您可以为段落标记提供一个类，并直接在CSS中定位它们。

Answer 2

在代码中添加margin: auto;到.blog-content并删除.content的宽度将解决您的问题。

.content {
  text-align: center;
}

.blog_content {
  background-color: white;
  width: 60%;
  margin: 0 auto;
}

<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="http://via.placeholder.com/150x30" alt="NULL">
      </div>
      <p>
        This is the first paragraph!
      </p>
    </div>
  </div>
</section>

Answer 3

.blog_content {
  background-color: white;
  width: 100%;  // 60 -> 100
}

.blog_content与.content相关。

如何使段落适合不同的浏览器宽度

3 个答案: