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.