I'd like to have a number of images, each with a caption, in a horizontal row, and center the row, e.g:

Image1      Image2     Image3 
Caption1   Caption2  Caption3

So I tried something like this:

<div class="images">
  <div class="image">
      <p><img src="..." /></p>
      <p>caption 1</p>
  <div class="image">
      <p><img src="..." /></p>
      <p>caption 2</p>
  <div class="image">
      <p><img src="..." /></p>
      <p>caption 3</p>

This displays the images vertically, so I tried to set the display to inline:

div.image { display:inline; }

and to center the whole thing:

div.images { margin: 0 auto; }

but neither seems to work as I expected.



3 answers

This was chosen as the best answer

Ah, I got this to work:

div.image { display:inline-block; }
div.images { text-align:center; }
Answered over 9 years ago by AlexBlack
  • Did you test in IE? According to quirksmode [http://www.quirksmode.org/css/display.html#t03] this does not behave correctly in IE 6/7 on naturally block elements. Jason Keene over 9 years ago
o.k.w 2355

Aother method is to use float.


div.image { float: left; }

float is very useful but can be tricky at times, you can google to learn more on how to handle floating stuff. Here's a good read:
CSS Float Theory: Things You Should Know

Answered over 9 years ago by o.k.w
  • Thanks okw, I tried float, and it worked well for getting them horizontal, but seemed to make it quite difficult to center the set of them. AlexBlack over 9 years ago
  • No prob, as long as your solution works:) o.k.w over 9 years ago

I use this html (generated with PHP):

<div class="mediabox">
    <div class="thumb"> 
        <a  href="urltolargeimage"  rel="prettyPhoto[galleryname]" style="background-image: url('urltothumbnailimage')" title="caption"></a>

with this CSS:

    float: left;
    margin: 0 23px 0 0;
    height: 180px;
overflow: hidden;

.thumb a{
    display: block;
    width: 160px;
    height: 106px;
    border: 1px solid #AF9773;
    background-repeat: no-repeat;
    background-position: 50% 50%;

a.portrait {
    background-position: 50% 0%;

.mediabox p{
    font-size: 0.714em;
    text-align: center;
    padding: 3px 0 0 0;
    width: 160px;

to layout thumbnails, that are cropped by the inline CSS, so image size is less important and the prettyphoto jquery plugin to display the large image in a lightbox.

it works cross browser including IE (you need a fixed height on the floated box to allow for variable length captions, my height gets about four lines of text)

you can see it in action here: http://www.gold-fever.net/gallery.php

Answered over 9 years ago by Tony Crockford