CSS 居中图像水平内联动态宽度父级答案

【问题标题】：CSS Center Image Horizontally Inline Dynamic Width ParentCSS 居中图像水平内联动态宽度父级
【发布时间】：2016-10-15 04:00:39
【问题描述】：

我试图在宽度为100% 的div 内水平居中图像。目前我在两边都有两个图像，它们将充当具有float: left; 和float: right; 属性的按钮。

我尝试过的所有解决方案都说过要制作图像display: block，但这不会让我在任一侧都有按钮。

这是我当前代码的Codepen Example。我正在尝试将 div 中具有类 mainimg 的图像与类 main 居中。

关于如何使该图像居中的任何想法？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：