如何居中我的网格html和css？（专辑）[复制品]

Question

我想把网格放在中间，但它总是会离开。我的想法是创建音乐专辑展示照片。

为了解释我想要什么，我显示了一个图像。第一张照片是正在发生的事情，它被称为“爵士乐”是我的目标。

代码是：

<style>
.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: center;
  justify-items: center;
  }
.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
  margin: auto;
  justify-items: center;
}

</style>
<section class="grid">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
</section>

Answer 1

我相信你是在以跨度为中心，而不是图像本身。只需将代码移动到. rid img：

.grid img {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: center;
  justify-items: center;
}

您也可以改用flexbox：

.grid img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

Answer 2

我已经在代码中指出了我应用更改的地方。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px); /* Adjusted */
  grid-gap: 20px;
  align-items: center;
  justify-content: center; /* Adjusted */
}

.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  margin: auto;
  justify-items: center;
}

<section class="grid">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
  <img src="https://images.shazam.com/coverart/t510017399-b1503746433_s400.jpg" alt="Sample photo">
</section>