CSS/XHTML problem with horizontally and vertically centered and floated div

I have a problem with floating divs. Here is my website: http://www.wokarts.com/index.php?option=com_gallery&controller=images&parent=6

I don't know why on some rows there are 4 images and on others only one.

Here is code responsible for it:

#gallery-images {margin:0 0 50px 0; display: table}
div.image-item {
    float:left; display: table; text-align: center;开发者_如何学运维 position: relative;
    width:180px; height: 150px;
    margin:10px 0 30px 40px;
    vertical-align: middle; text-align: center;
}

div.image-item a {display: table-cell; vertical-align: middle;}
div.image-item img {margin:auto; border:1px solid #d3d4d4;}


#gallery-image {margin:0 0 30px 0 auto; text-align: center; display: block; width:970px; padding-bottom: 80px;}
div.photo-item  {margin: 0 auto; width:850px; display: block; text-align: center;}
div.photo-item a.img {margin:0 auto;  text-align: center; }

---

Try display:inline-block;.

div.image-item { display: -moz-inline-block; display:inline-block; zoom:1; *display:inline; vertical-align:top; width:180px; margin:10px 0 30px 40px; vertical-align: middle; text-align: center; }

---

Change the display on div.image-item to inline-block and I would modify to have the image center within that div.

---

When you left float elements like that, as soon as they no longer fit on one line, the next floating element will drop down only as far as is necessary until it does fit.

The 5th image, for example, "gets stuck" against the bottom of your 3rd image instead of moving all the way back to the left edge because the 4th image isn't as high.

For the 10th image this doesn't happen, because the 9th image is higher than all the other images left of it, so as soon as the 10th image has dropped below the edge of the 9th image, it clears the entire row.

You'll see what I mean more clearly if you replace the margin by padding and add a border to .image-item.

To force the first item of each row down to the start of the next line, you should either not use floats, wrap every row of 4 items in a containing div, or use the magical powers of CSS3 to clear the floats at the start of each row:

.image-item:nth-child(4n+1) { clear:left }