How the devil would you style this list of images with captions

HTML & CSS
1

Hi There,

I’m trying to figure out the best method of marking up this list of images, with captions. The images vary in height and the captions are aligned to the right of the images, sometimes with two lines of text, and as close to vertically centred with the image as possible
See the below image for what I’m trying to achieve. I’d be tempted to use a definition list, floating the captions to the right, but getting each bit of text aligning correctly without styling each individual caption has got me stumped.

Any thoughts on the matter are most welcome (there will be a lot more images than this, hence the desire for a one rule fits all solution…the grey boxes represent images in case you were wondering):

Feedback greatly appreciated!

Dan

2

Perhaps this article, Vertical Centering of Inline Elements, will help you.

cheers,

gary

3

If you use inline-block as mentioned in Gary’s article above then you can do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Captions</title>
<style type="text/css">
h1 {
    margin:0 0 1em;
    text-align:center;
}
a img {
    border:none;
}
ul.captions {
    width:560px;
    margin:auto;
    background:#e4d9d3;
    list-style:none;
    padding:0;
}
ul.captions li {
    padding:20px;
    font-weight:bold;
    border-bottom:1px solid #ccc;
}
ul.captions li a img, ul.captions li a, ul.captions li span {
    display:-moz-inline-box;/*older  mozilla only ff2- */
    display:inline-block;
    vertical-align:middle;
}
ul.captions li a {
    width:200px;
    margin:0 20px 0 0;
}
ul.captions li span {
    color:#000;
    width:300px;
}
ul.captions li img {
    border:1px solid red;
}
</style>
</head>
<body>
<h1>Captions and vertical-alignment in IE5.5. and upwards</h1>
<ul class="captions">
    <li><a href="#"><img src="images/zimg1.jpg" width="200" height="150" alt="Example image" /></a><span>Caption<br />Here </span></li>
    <li><a href="#"><img src="images/zimg1.jpg" width="200" height="150" alt="Example image" /></a><span>Caption </span></li>
    <li><a href="#"><img src="images/zimg1.jpg" width="200" height="50" alt="Example image" /></a><span>Caption </span></li>
    <li><a href="#"><img src="images/zimg1.jpg" width="200" height="250" alt="Example image" /></a><span>Caption that is a bit longer and  can run 2 to or more lines </span></li>
    <li><a href="#"><img src="images/zimg1.jpg" width="200" height="150" alt="Example image" /></a><span>Caption </span></li>
</ul>
</body>
</html>
4

Thanks for the replies guys - I’ve used something similar to this and it’s worke nicely. Good stuff!