Question

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

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

示例：

onAction

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

在这里，您会看到一个换行符，因为3张图片不适合一行。我想让图像1 + 3在彼此之上。此外，图像周围的div应该在中间水平对齐。

如果我将对齐方式更改为TextField，则图像会按预期向左对齐，但图像周围的<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> div不会使整个图像内容居中。

这可能吗？

Answer 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/

如何仅围绕图像居中？

1 个答案: