Question

我试图将图像水平居中放在宽度为div的{{1}}内。目前，我在两侧都有两张图片，可用作具有100%和float: left;属性的按钮。

我尝试过的所有解决方案都说要制作图像float: right;，但这不允许我在任何一侧都有按钮。

以下是我当前代码的Codepen Example。我尝试使用类display: block将div中具有类mainimg的图像居中。

关于如何将图像置于中心的任何想法？

Answer 1

使用flexbox并更改.main的CSS规则，如下所示：

.main {
  display: flex;
  justify-content: space-between;
  background: black;
  height: 550px;
}

display: flex;将在宽度上分配三个项目，justify-content: space-between;将确保外部项目保留在外部位置。