网格项目偏离中心答案

【问题标题】：Grid items are off center网格项目偏离中心
【发布时间】：2020-06-15 20:55:41
【问题描述】：

每当我将浏览器的大小调整到最大时，一切正常，但包部分中的卡片不在中心。我错过了什么？

https://jolly-poitras-00d5ec.netlify.app/

/* Packages */

.packages {
  background-color: #F3F1F6;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  padding: 50px 0;
}

.packages-title h4 {
  font-weight: 300;
  opacity: 50%;
}

.packages-title h2 {
  font-size: 2em;
}

.packages-cards h1 {
  font-family: 'Lato';
  font-size: 4em;
  padding: 10px 0 20px;
}

.packages-cards div {
  background-color: #fff;
  margin: 50px auto;
  padding: 50px 0;
  max-width: 350px;
  -webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.15);
}

.packages-cards h4 {
  font-weight: 300;
  opacity: 50%;
}

.packages-cards p {
  font-weight: 300;
  opacity: 50%;
  line-height: 2;
  padding-bottom: 20px;
}

@media(min-width: 996px) {
  .container {
    margin: 0 10%;
  }
  .showcase {
    background-image: url('imgs/cityline.jpg');
  }
  .showcase-content h1 {
    font-size: 2.5em;
  }
  .showcase-content p {
    margin: 20px 0 45px 0;
  }
  .about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 60px;
  }
  .about-cards div {
    max-width: 300px;
  }
  .packages-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
  }
  .packages-cards div {
    margin: 50px 0;
    max-width: 300px;
  }
  .sign-up {
    background-image: url('imgs/signup-1200.jpg');
  }
}

<section class="packages">
  <div class="packages-title">
    <h4>A plan for everyone</h4>
    <h2>Plans &amp; Pricing</h2>
  </div>
  <div class="container">
    <div class="packages-cards">
      <div class="basic">
        <h4>Basic Plan</h4>
        <h1>$49</h1>
        <p>
          Up to 1000 Mbps up &amp; down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
        </p>
        <button class="btn">Sign Up</button>
      </div>
      <div class="plus">
        <h4>Plus Plan</h4>
        <h1>$79</h1>
        <p>
          Up to 1000 Mbps up &amp; down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
        </p>
        <button class="btn">Sign Up</button>
      </div>
      <div class="pro">
        <h4>Pro Plan</h4>
        <h1>$99</h1>
        <p>
          Up to 1000 Mbps up &amp; down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
        </p>
        <button class="btn">Sign Up</button>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

请在您的帖子中提供代码和更多信息。
由于以下答案对您有用，即使您在发布这些答案时自己找到了答案，您仍然可以接受。你说迈克尔的答案正是你找到的解决方案——不是第一个找到它的竞赛，所以听起来它值得接受:)

标签： html css grid css-grid

【解决方案1】：

将此添加到您的代码中：

.packages-cards {
    justify-items: center;
}

.packages-cards div {
    padding: 50px;
}

【讨论】：

我刚刚想出了这个确切的解决方案。感谢您的帮助！

【解决方案2】：

这部分导致向左对齐（居中被破坏）。

@media(min-width: 996px) {
  .packages-cards div {
    margin: 50px 0;
    max-width: 300px;
  }
}

将其更改为将块居中设置为

@media(min-width: 996px) {
  .packages-cards div {
    margin: 50px auto;
    max-width: 300px;
  }
}

虽然您可以添加width: 100%; 或min-width: 230px;，这取决于您的口味。

【讨论】：

谢谢！在等待的时候，我发现给.packages-cards 赋予justify-items: center; 的属性也可以。