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/

<强>更新

我更新了我的小提琴。我认为这就是你要找的东西，虽然我不确定我是否已经完全掌握了你所追求的东西。

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

见这里 - ＆gt; http://jsfiddle.net/7kvX2/2/

希望这有帮助!!!

如何将我的图像放在我的案例中？

1 个答案: