I want to display some 80px thumbnails in square divs. By 80px, I mean
that the images will be at most 80 pixels wide and/or tall, but the
nature of thumbnails is that they are usually taller than they are
wide or wider than they are tall.

So I know that the width and/or height of each image is less than or
equal to 80px, but I do not know the width and height of each one. I
would like the images to appear centered horizontally and vertically
(whichever is required) within a square box (a div with a border).
That is, the images that are wider than they are tall should be
vertically centered, and the images that are taller than they are wide
should be horizontally centered.

I would like to use W3C compliant, modern, clean CSS. No Javascript
allowed. The code needs to work in IE and Opera at least.

---

Clarification of Question by carbon-ga on 05 Dec 2003 20:03 PST

In case it isn't clear, it would be very desirable not to use tables
or valign. I'm trying for proper, clean, XHTML strict.

Are you talking about something like this?
http://www.littlekosh.com/cthumb/index.php

If you have any access to a database backend I would recommend that
you store the width/height/location information for your thumbnails in
there.  I haven't bothered really benchmarking this script, but I
don't imagine that it performs very well with a lot of images.

Stupid me, I just realized you probably wanted pure CSS--no background stuff.

Vertical alignment in CSS is notoriously difficult.  There are a
couple of solutions out there, but neither one of them is capable of
doing what you want.

The first (http://www.wpdfd.com/editorial/wpd0103.htm#toptip) requires
knowledge of height of what you want to center.

The other (http://vmalek.murphy.cz/) focuses on making your entire
page centered, and so it plays with the size of the centered element
(an image in your case, so no good).

Sorry I can't be of more help.

I appreciate your efforts.

Since you're talking about using IE to display the images, and CSS
doesn't work terribly well, did you try to vertically align your image
within your <p> with <img align=absmiddle ...>.  Don't know if this is
much help, especially since this thread has expired.

This works as expected in Internet Explorer, Opera and Mozilla. 
<div id="imageCenteredDiv" style="background-image: url(image.jpg);
background-position: center center; border: solid 1px #000000;
background-repeat: no-repeat; height: 80; width:80;"></div>