Little CSS help, please?
What I want to do: display a series of images (thumbnails, really) in a rectangular grid of 240x240 pixel boxes (plus padding, but that's not important). The number of images per row should be dynamic (i.e. depend on the width of the viewport). I don't know the dimensions of the images, but I know no dimension can exceed 240 pixels. All the images should be horizontally and vertically centered in their respective box.
An easy way of doing this would be to explicitely set the width and height on each image, and include margins (left and top, at least) calculated to offset the image exactly into the center of its 240x240 bounding box. HOWEVER! I would like to do all this programmatically, and for performance reasons, I do not want to check the dimensions of each image all the time.
What I'd like is a pure CSS (no Javascript!) solution to this. The closest I've come (after much hair-pulling due to the sheer insanity of CSS) is this:
div#thumb img {
display: inline-table;
width: 240px;
padding: 10px;
text-align: center;
}
img {
border: none;
display: table-cell;
vertical-align: middle;
}
I think it says quite a lot about CSS that it includes the ability to recreate, without table elements, the very same table-based layouts it was supposed to make obsolete (and, for that matter, that resorting to this is often the sanest way of solving a particular layout problem), but disregarding that for the moment - the above works, but it isn't perfect, since the bounding boxes for each thumbnail will be less than 240 pixels high if no thumbnail in a given row has the full height. (Instead, they'll only be as high as the tallest thumbnail.)
This may actually be preferable in practice, but nonetheless, I'm wondering if there is a way of ensuring that all the bounding boxes are exactly the desired height.
(And no, I've obviously tried things like height: 240px. Yes, it does yield the right height; unfortunately, the box will be aligned wrong as a result. I've also messed around with line-height to try and counter that, but to no avail.)
I'd be grateful for any answers, but please, only answer if you've either got a good amount of CSS knowledge or have actually verified that your solution works. No "I don't know anything about CSS really but here's something I would try"; chances are I've already tried it and found it doesn't work for one reason or another.
(I've also searched for answers already, of course, but there are none that are helpful; broadly, there's answers that solve a different problem (e.g. assume known image sizes), answers that use tables, and answers that just plain don't work.)