html - 如何在我的案例中将我的图像居中？

Question

我有一个关于文本对齐问题的问题

我有类似的东西

HTML

<div id='wrapper'>
   <div class='item'><img src='img1.jpg' /></div>
   <div class='item'><img src='img2.jpg' /></div>
   <div class='item'><img src='img3.jpg' /></div>
   <div class='item'><img src='img4.jpg' /></div>
</div>

CSS

#wrapper{
    width:300px;
    text-align:center;
}

.item{
    display: inline-block;
    margin: 5px;
}

它是这样显示的

 -------------------------------------
|       img1      img2     img3       |
|                                     |
|                 img4                |
|                                     |
|                                     |
 -------------------------------------

我希望得到这样的结果:

(请注意 img 1 到 img3 仍在 div 的中心但不是 img4)

 -------------------------------------
|       img1      img2     img3       |
|                                     |
|       img4                          |
|                                     |
|                                     |
 -------------------------------------

另外，图像的数量是动态的，我不知道我会有多少图像。

你们有什么可以帮忙的吗？非常感谢!

Answer 1

删除

text-align:center;

来自 #wrapper CSS 类并为其提供 100% 的宽度。

所以，基本上你的包装类应该如下所示:

#wrapper{
    width:100%;
}

在这里查看:http://jsfiddle.net/7kvX2/1/

更新

我已经更新了我的 fiddle 。我想这就是您要找的东西，但我不确定我是否已经完全理解您要找的东西。

作为一堆的图像保持居中。甚至，当您添加奇数张图片时，它们也会按照您想要的方式堆叠。

看这里-> http://jsfiddle.net/7kvX2/2/

希望这有帮助!!!