Centering Issue

[zompus]

Hello,

See: http://tinyurl.com/63rhpk

I'm having problems centering the thumbnail content. Can't get anything to work and now I'm all out of ideas. I've asked around on various forums and nobody knows a method of centering content where i have text above and below thumbnails in a row. I'm stuck!

Any advice would be greatly appreciated.

[PicnicTutorials]

Did you work it out? Looks good to me!

[zompus]

Nope, still trying to center it.

[PicnicTutorials]

You might want to be a little more specific then - because everything looks well centered to me in all browsers.

[zompus]

Try changing the width of your browser. You see the thumbnails, i'm trying to get them centralized on the white canvas.

[PicnicTutorials]

You've got a lot of divs there! This fixes it for me. You may need to change the width slightly, but regardless, it needs to be given a width in order to center itself.

#content-inner {
width: 900px;
margin: 0 auto;
}

[Rayzur]

You could set them in their own div that has a fixed width of say four of the images plus margins. Then center that div in the #content-inner. That would keep you from having overflow problems of other elements like the header and footer.

Your layout starts breaking between 3 and 4 images right now as it is. You'll need to set a min-width on the entire layout.

Basically do just what EW said but just set the images in their own div in the #content-inner

#image-wrapper {
width: 800px;
margin: 0 auto;
}

[zompus]

On bigger screens it would look messed up though and I'd rather not set a number of thumbs per row. :-(

Thanks anyway.

[Tyssen]

Rather than floating them left you could use display: inline-block but it's not very well supported e.g. it only just gained support in FF3 and IE only supports it for elements that are naturally inline or have been set to inline outside the declaration block.

[zompus]

hmm, thanks everyone.

Think I will need to use tables for this. *shivers*