Center float except last row - php

Question

I need to center some floated divs inside a container. The code I'm using works but I need the last row of floated elements to be aligned to the left and not centered. It's a photo album and all the thumbnails are automatically generated by a gallery script.
This is what the code produces
This is what I need
I don't think this is possible with css alone, maybe some jquery or php...
CSS
#gallery {
background-color: #ffffff;
border: 1px solid #999999;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
width: 750px;
}
.image {*display:inline;
background: #F7F9FD;
border: 1px solid #E7F0F5;
display: -moz-inline-stack;
display: inline-block;
line-height: 100%;
margin: 1em;
padding: 0;
text-align:left;vertical-align:top;
zoom:1;
}
.imagethumb a, .imagethumb a:hover {
border:0;
display: block;
margin: 5px;
}
.imagethumb {float: left;}
.clear {clear: both}
The PHP code
<div id="gallery">
<?php while (next_image(false, $firstPageImages)): ?>
<div class="image">
<div class="imagethumb">
<?php printImageThumb(getAnnotatedImageTitle()); ?>
</div>
</div>
<?php endwhile; ?>
</div>
Generated html
<div id="gallery">
<div id="images">
<div class="image">
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
</div>
<div class="image">
<div class="imagethumb"><img src="/zen/cache/p101-02_110_thumb.jpg" alt="p101-02" /></div>
</div>
<div class="image">
<div class="imagethumb"><img src="/zen/cache/p101-04_110_thumb.jpg" alt="p101-04" /></div>
</div>
[...]
</div>

Answer 1

Not sure what you are doing with all those nast hacks.. no jquery or php needed. just css.
This works fine for me. I did add widths and heights on the images because I didn't feel like actually getting an image. buts its all the same.
CSS
#gallery { background-color: #fff; border: 1px solid #999; margin: 0 auto; overflow: hidden; position: relative; text-align: center; width: 750px; }
.imagethumb a,
.imagethumb a:hover { border:0; display: block; margin: 5px; }
.imagethumb {float: left; margin:5px; background: #F7F9FD; border: 1px solid #E7F0F5; width:100px; height:200px;}
.clear {clear: both}
HTML Final Output
<div id="gallery">
<div id="images">
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
</div>
<div class="clear"></div>
</div>

Answer 2

You could just align left the whole thing with a left-padding and achieve the same result.
Or, you could align left everything and place it in another div container that is centered.