How to center my images in my case?

Question

I have a question regarding the text align issue

I have something like

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;
}

It display like these

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

I was hoping to get like these:

(Please noted img 1 to img3 are still in the center of the div but not img4)

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

Also, the numbers of images are dynamic and I can't tell how many image I would have.

Is there something you guys can help? Thanks a lot!

Answer 1

Remove the

text-align:center;

from the #wrapper CSS class and provide a width of 100% to it.

So, essentially your wrapper class should look as follows:

#wrapper{
    width:100%;
}

See this here: http://jsfiddle.net/7kvX2/1/

UPDATE

I have updated my fiddle. I think this is what you are looking for, though I'm not sure if I've fully grasped what you are loking for.

The images as a bunch remain centered. Even, when you add odd number of images, they stack the way you want.

See here-> http://jsfiddle.net/7kvX2/2/

Hope this helps!!!