html - 使用 CSS 将图像 block 居中

Question

我使用盒子模型创建了一个 3 x 3 的图像网格。我希望所有图像都居中，所以我将所有图像包裹在一个 div 中并将 padding-left 设置为 10%。这行得通，但我假设这不是正确的做法，所以我要求有人告诉我我应该怎么做。下面的 HTML 和 CSS……

img {
  width: 30%;
  float: left;
  margin: 0.1%;
  max-width: 700px;
}

.block {
  padding-left:10%;
}

<div class="block">
  <img src="placeholder.png">
  <img src="placeholder.png">
  <img src="placeholder.png">
  <img src="placeholder.png">
  <img src="placeholder.png">
  <img src="placeholder.png">
  <img src="placeholder.png">
  <img src="placeholder.png">
  <img src="placeholder.png">
</div>

Answer 1

您可能想为此类事物使用 CSS 网格。对于 3x3 网格，您的 CSS 看起来像这样:

.block {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

这是一个 working example

如果您想了解有关 CSS 网格的更多信息，那里还有很多教程。如果您不知道从哪里开始，this one不过很有帮助。