?

Log in

No account? Create an account

Little CSS help, please?

« previous entry | next entry »
Oct. 2nd, 2012 | 11:33 pm

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.)

Link | Leave a comment | Share

Comments {4}

Alice Dryden

(no subject)

from: huskyteer
date: Oct. 3rd, 2012 02:04 pm (UTC)
Link

I pottered around with this a bit and found a solution here: http://www.brunildo.org/test/img_center2.html

Seems that float and display: table-cell don't play nicely together, so we need an extra element - I've used another div, the tutorial uses a link.

CSS:



HTML:



...etc etc.

Hope this suits your purpose; I wasn't sure from your code whether thumb was one div that held all the images, or if each image was within a thumb div.

Reply | Thread

Schneelocke

(no subject)

from: schnee
date: Oct. 3rd, 2012 09:58 pm (UTC)
Link

The <div> structure is entirely flexible; I can adjust that as needed. :)

Outside of that, this... actually works. I did a quick and dirty test here, and it works. o.o I'm pretty sure I messed around with display: table-cell on my own, but couldn't get it to work the way I wanted to, not with an explicitely-specified height.

I'll never understand CSS, or why some things work and some things don't. :P

Thanks a bunch, though, this is great! And now I know who to turn to when I have more questions, too. ;)

Reply | Parent | Thread

Alice Dryden

(no subject)

from: huskyteer
date: Oct. 4th, 2012 03:40 pm (UTC)
Link

Other people's CSS problems are always much more interesting than the ones I'm paid to fix :)

Reply | Parent | Thread

Schneelocke

(no subject)

from: schnee
date: Oct. 4th, 2012 07:31 pm (UTC)
Link

Oh, you're doing this for a living? No wonder you're good at it, then. ^^ (And I'm glad I was able to provide something a little more interesting than the usual problems you encounter on the job. :))

Reply | Parent | Thread