HTML中的图像网格格式

Question

我是一个HTML和StackOverflow的初学者，并试图创建一个网页。通过一些研究，我学会了如何创建这个网格，但我不确定如何将它与网页的中心对齐。我试着用证明-内容:中心，但没有运气。我们将非常感谢您的帮助。

实际网页

CSS代码：

.image-grid {
  --gap: 16px 16px;
  --num-cols: 4;
  --row-height: 40px;

  padding: var(--gap);

  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: car(--row-height);
  gap: var(--gap);
}

img {
  border-radius: 15px;
  border: 5px solid;
}

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 150px;
  height: 150px;
}

.overlay {
  position: absolute;
  top: 5px;
  bottom: 0;
  left: 5px;
  right: 0;
  height: 150px;
  width: 150px;
  opacity: 0;
  transition: 0.5s ease;
  border-radius: 10px;
  background-color: rgb(149, 69, 53);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: black;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Html代码(我在网格中有16张图片，因此基本上重复了16次)：

<div class="image-grid">
    <div class="container">
      <img
        src="picture"
        alt="Avatar"
        class="image"
      />
      <div class="overlay">
        <div class="text">Angelite<br /><br />STONE OF AWARENESS</div>
      </div>
    </div>
<div>

Answer 1

你是说这个吗？.image-grid {place-items: center;}

顺便说一句，请注意你的最后一行！别忘了关上标签！

Answer 2

要在网格中对图像进行中心化，请执行以下操作：

您的width: 50%;在您的.container上导致了这个问题。

删除它，然后将justify-items: center;应用于.image-grid。

Answer 3

div {
  display: grid;
  place-items: center;
}

尝尝这个