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会很有帮助。

Answer 2

您可以使用以下CSS来实现：

.block {
    font-size: 0;
    text-align: center;
    margin: 0 auto;
}
img {
    display: inline-block;
    width: 30%;
    max-width: 700px;
    vertical-align: center;
    margin: 0.1%;
}

Answer 3

如果我错了，请纠正我，但这会使障碍居中，不是吗？只需在其中添加填充...？

.block {
margin-left: auto;
margin-right: auto;
}

Answer 4

.block {
    float: none;
    margin: 0 auto;
}

Answer 5

像这样更新您的CSS

block{
    display:flex;
    flex-wrap:wrap;
}
block img{
    width:33.33%;
}

使用CSS将图片块居中

5 个答案: