CODEWITHSUNDEEP
htmlcss
Noah Boucher
Noah Boucher

Reputation: 11

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

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.

Upvotes: 0

Views: 11111

Answers (2)

Brodie
Brodie

Reputation: 8717

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.

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

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>

Upvotes: 1

Related Questions