Centered Image Gallery with captions

Introduction

Centering an image gallery with captions beneath the images that works in most browsers using appropriate markup and CSS for the presentation is not as straightforward as it should be.

Functional markup

Around each image/caption pair an image gallery should provide spacing in the visual domain, or pauses in the audio domain. This functionality should be provided via an HTML element who's default properties provide this. Paragraph markup provides the required spacing and/or pause around each image/caption pair, and it's use is semantically appropriate since it marks up the textual alternative for the image and the caption.

Styling

Horizontal alignment and distribution of image & caption pairs requires inline-block behaviour, this is provided by the CSS 2.0 inline-table or the CSS 2.1 inline-block display values. One or both is/are supported by IE5.5+, Opera5+ and KHTML browsers (Safari, iCab, Konqueror etc.). MS Internet Explorer first introduced inline-block as a proprietary extension in IE5.5. Recent Opera's and KHTML based browsers also support inline-block now that it has been incorporated in the CSS 2.1 specification. By specifying both values we can cover a fair number of browsers: display:inline-table;display:inline-block.

What about Gecko based browsers?

Firefox, Netscape6+, Mozilla etc. use the Gecko rendering engine which does not support inline-table. Recent Gecko versions have experimental support for inline-block type behaviour via the proprietary -moz-inline-block and -moz-inline-box values, but at the time of writing this support is so buggy that it's unusable for this purpose. Fortunately current Gecko's have a CSS table bug that can be exploited to achieve inline-block type behaviour, if we specify the following sequence: display:table-cell;display:inline-table;display:inline-block, Gecko based browsers will also play ball.

Vertical alignment

To get captions wider than the image to wrap the inline-blocks have been given an explicit width, inline-block type elements default to "shrink to fit" behaviour. In the demo below, the longer caption on the first image & caption pair demonstrates vertical alignment. Opera defaults to top aligning the image & caption pairs, IE needs a vertical-align:top specified on the spans to fall in line with Opera. Gecko based browsers bottom align the image & caption pairs. I presume that this is due to the fact that we are relying on a Gecko CSS table bug. I'm not aware of a method to get Gecko to top align.

Demo

A Butterfly, A Butterfly, A Butterfly, A Butterfly

Butterfly
250 Pixels, 250 Pixels, 250 Pixels, 250 Pixels

A Butterfly

Butterfly
300 pixels

A Butterfly

The above demo was tested with:

Opera 5.12, 6.04, 7.11, 7.51, 8.01
IE 5.5, 6.0
Firefox 0.9.2
Mozilla 1.5

I am not able to test with KHTML based browsers (Safari, iCab, Konqueror), but afaik they support inline-table and reasonably recent versions also support inline-block, so it should work in those browsers also.

CSS code

#gallery{text-align:center}

#gallery p{display:inline}

#gallery span{margin:0 5px 5px 5px; vertical-align:top; width:172px; display:table-cell; display:inline-table; display:inline-block}

#gallery p img{margin-bottom:5px}

HTML code

<div id="gallery">

<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p>

<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p>

</div>

Footnotes

There are some cross browser differences with regard to the horizontal spacing between the image & caption pairs.

For those who want to experiment with the method described above so that it could also be used for elements that default to block level like div, this IE block level element inline-block hack may be of interest.

Credits

Thanks to Carl Lindmark who supplied the hack that extended the original code to work in Gecko based browsers.