如何仅将 div 围绕图像居中？答案

【问题标题】：How to center only the div around images?如何仅将 div 围绕图像居中？
【发布时间】：2016-02-26 17:32:17
【问题描述】：

我有一些图像要在给定大小的 div 内对齐。

问题：我想将图像水平居中。如果它们不适合单行，我希望图像堆叠，但只有 div 周围的 div 应该水平居中。图像本身应始终向左对齐。

例子：

<div id="parent" style="display: inline-block; position: relative; text-align:center; width: 280px;border:1px solid black;">
    <div id="wrapper" style="margin: 10px; border: 2px solid red; display:inline-block;">
        <img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" width="100px" />
        <img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" width="100px" />
        <img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" width="100px" />
    </div>
</div>

http://jsfiddle.net/dccyy47r/14/

在这里您会看到一个换行符，因为 3 张图片不能排成一行。我想让图像 1 + 3 相互重叠。此外，图像周围的 div 应该在中间水平对齐。

如果我将对齐方式更改为text-align: left，图像会按预期向左对齐，但是图像周围的wrapper div 不会使整个图像内容居中。

这可能吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

居中您的 div（删除 display:inline-block）：

#parent {
    margin: 0 auto;
}

浮动您的图像并添加一些间距以使其看起来不错

#wrapper img {
    float: left;
    display: inline-block;
    padding: 0 6px 6px 0;
}

http://jsfiddle.net/dccyy47r/13/

【讨论】：

我不想让黑色 div 在页面内居中。我想将图像居中 inside 红色 div，但仍保留 1.+3。图像在彼此之上。因此，从左边界或右边界到包含的图像具有相等的空间。但不是让第三张图片与中心对齐，而是在顶部图片的左侧和下方。
是的，完全正确。但不必给出wrapper 的确切宽度，因为图像应该动态填充parent（具有已知宽度）。
如果不指定宽度，它将无法轻松工作。您不能确定要添加多少图像然后更新宽度吗？如果你有 10 张图片，它应该怎么做。它应该填满整个空间然后转到第二行吗？
我可以保证所有图片的宽度都一样，但是我之前不知道宽度。所以我总是想一个接一个地分发所有图像。不管它可能需要多少行。我也不知道要添加多少张图片。