Center float except last row

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">
<a href="<?php echo htmlspecialchars(getImageLinkURL());?>" title="<?php echo getBareImageTitle();?>"><?php printImageThumb(getAnnotatedImageTitle()); ?></a>
</div>
</div>
<?php endwhile; ?>
</div>

Generated html

<div id="gallery">

<div id="images">

<div class="image">
<div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
</div>
<div class="image">
<div class="imagethumb"><a href="/zen/p101-02.jpg.php" title="p101-02"><img src="/zen/cache/p101-02_110_thumb.jpg" alt="p101-02" /></a></div>
</div>
<div class="image">
<div class="imagethumb"><a href="/zen/p101-04.jpg.php" title="p101-04"><img src="/zen/cache/p101-04_110_thumb.jpg" alt="p101-04" /></a></div>
</div>
[...]
</div>

Answer 1

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.

Answer 2

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"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    </div>
  <div class="clear"></div>
</div>