我如何使我的网格 html 和 css 居中？（专辑）[重复]答案

【问题标题】：How do i center my grid html and css? (Album) [duplicate]我如何使我的网格 html 和 css 居中？（专辑）[重复]
【发布时间】：2021-04-30 14:05:05
【问题描述】：

我想把网格放在中心，但它总是向左。我的想法是创建音乐专辑展示照片。

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

代码是：

<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>

【问题讨论】：

这不会改变或解决任何问题，但不推荐使用 grid-gap。开始只使用“gap”

标签： html css image grid

【解决方案1】：

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

.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>

【讨论】：

【解决方案2】：

我相信您将跨度居中而不是图像本身。只需将代码移至 .grid 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;
}

【讨论】：