Question

我试图让我的部分的文章显示完全相同（第三篇文章在扩展到更全面的浏览器宽度时居中）：https://www.screencast.com/t/vGdpZ91l

我已经探索了CSS的所有显示选项。当前的CSS设置为display: inline-flex;

这是我的CSS / HTML。非常感谢帮助。

.places h1 {
  align-content: top-left;
  font-size: 30px;
}

.places article {
  display: inline-flex;
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="7-places.css" media="all">
  </head>
  <body>
    <header>
    </header>

    <div class="container">
      <section class="places">
        <h1>Places</h1>
        <article class="home">
        <h2>Home</h2>
        </article>
        <article class="apartment">
        <h2>Apartment</h2>
        </article>
        <article class="dorm">
        <h2>Dorm</h2>
        </article>
      </section>
    </div>

  </body>
</html>

Answer 1

在父级上使用flex，并将其设置为flex-wrap: wrap; justify-content: center;。

.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.places h1 {
  align-content: top-left;
  font-size: 30px;
  width: 100%;
}

.places article {
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}

<div class="container">
  <section class="places">
    <h1>Places</h1>
    <article class="home">
      <h2>Home</h2>
    </article>
    <article class="apartment">
      <h2>Apartment</h2>
    </article>
    <article class="dorm">
      <h2>Dorm</h2>
    </article>
  </section>
</div>

对齐文章以显示第三个元素居中

1 个答案: