How do I place images side-by-side with captions underneath?

Question

How do I place images side-by-side with captions underneath? I'm currently using a table to accomplish this effect and it looks like this:

<table align="center">
  <tr>
     <td>
        <img style="width: 200px; height: 275px" src="image"/>
         <br/><a href="link">title</a>
     </td>
     <td>
        <img style="width: 200px; height: 275px" src="image"/>
        <br/><a href="link">title</a>
     </td>
  </tr>
</table>

I was wondering if there was a better way to do this without using tables.

answer is http://stackoverflow.com/questions/10128950/how-to-write-a-caption-under-an-image @Luis P.A just copied it — m0bi5, Feb 05 '15 at 17:44

score 1 · Answer 1 · answered Feb 05 '15 at 17:43

Use HTML5 Tags

CSS

figure{
    display: inline-block;
}

HTML

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>
<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

figure{
display: inline-block;
}

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>
<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

This is the most concise answer! – lifebalance Sep 29 '18 at 04:33 — lifebalance, Sep 29 '18 at 04:33

score 1 · Answer 2 · answered Feb 05 '15 at 17:44

You can use divs to do this.

something simple like:

<ul>
  <li class="container">
    <img class="image" src="#"/>
    <span class="caption">my caption</span>
  </li>
  <li class="container">
    <img class="image" src="#"/>
    <span class="caption">my caption</span>
  </li>
</ul>

then you're looking at

.container {
  float: left;
}

.image {
  display: block
}

.caption {
  display: block;
  width: 100%;
  text-align: center; //assuming centered captions
}

you might need a clearfix for the outer UL element (if you want to use a list to represent a list of images). Not sure but there's also the figure/figcaption route as well, but this would be fine if you weren't considering html5 elements.

As briefly mentioned, I suggest a UL/OL in this case because semantically it's probably a list of images. Even if you went the route with figures I would say to put the figures in each list item.

I would also add a class to the
like "imagelist" and then include .imagelist { list-style: none; } so the list dots are removed, but this solution is the right way to do it. — Michael Mahony, Feb 05 '15 at 17:54

How do I place images side-by-side with captions underneath?

2 Answers2