Polish language camps in the UK? Justyna, read this. ►

◄ Windows text editors / Terminus Code custom font

Vertically aligned thumbnails in DIV containers with block links

The vertical-align CSS property isn't well-supported, nor is display: table-cell ... if you've run into this whilst trying to ditch a table based design for an image gallery, you'll probably know how frustrating it can be.

This solution takes advantage of the fact browsers successfully vertically align images relative to each other. There are two images contained within each link; the actual thumbnail image (which can be portrait or landscape) and another to force the height of the DIV and give us something to position the thumbnail relative to.

In this case I've chosen 110 x 110 links, with thumbnails fitting within 100 x 100 pixels plus 5px of white space, and a 1px border around them to give the impression of a polaroid photo. You could just as easily set a suitable background image instead.

This is a bit of an ugly hack, harkening back to the days of spacer images. However, style sheets allow us to treat the full square area as a clickable link in browsers that support display: block, which is basically everything later than IE 4. There are two further non-obvious style declarations to work around IE bugs that can otherwise lead to doubled left margin and phantom top margin on elements.

Here you go, clean as I could make it, with just two class assignations used...

<div class="gallery"><a href="full_size_image.jpg"><img 
src="dot.gif" alt="" class="gallery" /><img src="/gubbins/images/thumbnail.jpg" 
height="80" width="100" alt="put your alt text here" /></a></div>

/* display: inline and the font-size declaration */
/* are to avoid bugs in IE rendering  */

div.gallery { float: left; border: 1px gray solid; margin: 5px; 
	display: inline; } 
div.gallery a { width: 110px; display: block; text-align: center; 
	background-color: white; font-size: 10px; }
div.gallery a img { border: 0; margin-right: 1px; 
	vertical-align: middle; }
img.gallery { margin: 0; width: 1px; height: 110px; 
	visibility: hidden; }

Whilst ideal for galleries, the limitation is that at least 1px of whitespace is required somewhere in the design for the image element that maintains the height—though you could set a background colour, turn it into a border, etc. What's annoying is that none of this rigmarole should be necessary. You should just be able to specify a height for a containing element, then choose to vertically centre content within it... but this is the real world, with ambiguous markup spec and cruddy browsers from Microsoft.

If you're reading this on the blog, the text above contains an image rather than a code demonstration. You can click here to see it in action or click here for the zipped code.

💬 Comments are off, but you can use the mail form to contact or see the about page for social media links.

BLOG  MORE  ABOUT  MAIL