I'm using cck imagefield to allow bloggers to upload four images.
ImageCache makes copies which are 200x200px, and these are displayed under the blog post.
They are lightboxed, and so they link to the large images as a 'grouped' mini-gallery.

At the moment the images are aligned vertically on the left side.
What I'd like is for them to be aligned horizontally and centred like below:

|         imageimage  imageimage         |
|         imageimage  imageimage         |
|         imageimage  imageimage         |
|         imageimage  imageimage         |
|         imageimage  imageimage         |
|
|         imageimage  imageimage         |
|         imageimage  imageimage         |
|         imageimage  imageimage         |
|         imageimage  imageimage         |
|         imageimage  imageimage         |

The css classes looks like this (I've stripped all the image/lightbox parts out - they didn't have classes):

<div class="field field-type-filefield field-field-image">
<div class="field-items">

<div class="field-item odd"><a class="lightbox-processed"  <img></a></div>

<div class="field-item even"><a class="lightbox-processed"  <img></a></div>

<div class="field-item odd"><a class="lightbox-processed"  <img></a></div>

<div class="field-item even"><a class="lightbox-processed"  <img></a></div>

</div>
</div>

I have no idea what I can do to re-position the images as described.

It makes sense to me to try something like:
.field-items {margin: 0 auto} to get all the images in the center of the page
and then something like:
.field-item {float:left} to get the individual images aligned horizontally

So as usual with css problems, I've spent 3 hours trying hundreds of similar ideas
to this without really understanding what I'm doing, and without any success.

Thanks for any suggestions.

Comments

-Anti-’s picture

This seems to work, but I don't know if it the 'right' way to do it:
Also, I'm not particularly happy having to specify a width.

.field-items {
margin: 0 auto;
width: 420px;
}

.field-item img {
float: left;
}

Any advice?