多分区CSS内的图像中心

我需要将多个div中的图像居中。我尝试的一切都会中断

这是四个盒子，红色和蓝色交替-水平。希望它们在页面中居中，并在另一个div块下推到顶部。每个块中都有一个图像，该图像在相对红色或蓝色框的所有边上居中于相同的%边距。你可以在下面看到，我试着将图像直接放在redbox/blueboxdiv中，或者甚至用一个方框将图像更深一层

4框示例-HTML：

CSS:

box容器{
高度：900px；
宽度：950px；
填充：12px；
显示：内联块；
垂直对齐：顶部；
左边距：自动；
}
.蓝盒子{
高度：150像素；
宽度：170px；
背景颜色：矢车菊蓝；
显示：内联块；
边框：3倍纯黑；
}
雷德博克斯先生{
高度：150像素；
宽度：170px；
背景颜色：浅珊瑚；
显示：内联块；
边框：3倍纯黑；
}
.缩略图像{
显示：块；
保证金：自动；
高度：130像素；
宽度：150px；
}

或

使用flexbox

.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
}

---

您需要根据缩略图div的高度向图像添加填充

.thumbnail img {
  display: block;
  height: 130px;
  width: 150px;
  padding: 10px;

}

---

我相信我有你在这里寻找的东西，我刚刚擦了擦：

代码之前的几个关键点

为了让所有的div元素'float'保持在左侧，您必须应用div.className{float:left；}这将确保div从左向右浮动，并在空间不足时环绕（很像一段文本）。有关CSS浮点属性的更多信息，请参见：

垂直边距不支持“边距：自动；”就像它在水平方向上一样。边距可以由div.ClassName{Margin:0px 0px 0px；}或div.ClassName{Margin:0px auto；}定义。这种方式的第一个元素是上/下边距。第二个是左/右边距。我不得不用一点数学来垂直居中你的图像，但它能满足你的需要。以下是一些关于保证金的好文件：

清理了HTML并删除了一些不再需要的CSS。我这样做是为了在维护解决方案的同时简化代码。如果将此代码放到站点中，则需要确保只针对适当的标记。例如，我的代码针对所有img标签。您可能希望在所需的IMG标记上放置一个类或ID，然后确保它反映在CSS中

我对HTML做了很多修改。删除了许多用于故障排除的不必要元素

  <div class="bluebox">
    <img src="images/1.jpg">
  </div>

  <div class="redbox">
      <img src="images/2.png">
  </div>

  <div class="bluebox">
      <img src="images/3.jpg">
  </div>

  <div class="redbox">
      <img src="images/4.png">
  </div>

---

应该这样做。希望有帮助

我们能看到小提琴或片段吗？@CarlJan不确定这是什么意思。这解决了一半问题-图片现在居中。如何将整个#box container{text align:center；}移动到中心位置？它将使所有的#box container{text align:center；}居中。您的问题不够清楚。尝试更改图像宽度。您将看到所选答案与我的答案之间的差异：）

.thumbnail img {
  display: block;
  height: 130px;
  width: 150px;
  padding: 10px;

}

  <div class="bluebox">
    <img src="images/1.jpg">
  </div>

  <div class="redbox">
      <img src="images/2.png">
  </div>

  <div class="bluebox">
      <img src="images/3.jpg">
  </div>

  <div class="redbox">
      <img src="images/4.png">
  </div>

.bluebox {
  height: 150px;
  width: 170px;
  background-color: cornflowerblue;
  display: inline-block;
  border: 3px solid black;
  float:left; // new.  essentially left justifies the divs.
}

.redbox {
  height: 150px;
  width: 170px;
  background-color: lightcoral;
  display: inline-block;
  border: 3px solid black;
  float:left; // new
}

img { // simplified the target.  wrap entire contents of the HTML with a different DIV id to target only images within that div
  display: block;
  margin: 10px auto; // added 10px.  it will then apply 10px margin to top and bottom, auto on left/right
  height: 130px;
  width: 150px;
}