How to write a caption under an image?

Question

I have two images that need to kept inline; I want to write a caption under each image.

<center>
   <a href="http://example.com/hello">
       <img src="hello.png" width="100px" height="100px">
   </a>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
   <a href="http://example.com/hi">
       <img src="hi.png" width="100px" height="100px">
   </a>
</center>

How can I implement?

@ceejayoz not to mention all the `&nbsp` as opposed to say setting a margin, or using other css layout tools. — jzworkman, Apr 12 '12 at 17:52
While this has essentially been answered, the only way I've found to get a caption to fit an inline image's width is to hard-code the width property on a wrapper or the caption itself. — MyNameIsKo, Apr 29 '14 at 15:51
@McGarnagle do not edit code meaning in other people's posts. Formating is OK (well unless it's python), but all code contents are important! Thanks to your edit, jxworkmans post looked meaningless. And really, fixing *wrong code* in *question* is complete nonsense. What would be the point of answers then? — Tomáš Zato, Dec 30 '14 at 17:14

score 331 · Answer 1 · edited Jun 24 '15 at 08:51

331

Figure and Figcaption tags:

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

Gotta love HTML5.

See sample

#container {
    text-align: center;
}
a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;
}
figure {
    padding: 5px;
}
img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}

<div id="container">
    <a href="#">
        <figure>
            <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
            <figcaption>First image</figcaption>
        </figure>
    </a>
    <a href="#">
        <figure>
             <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
            <figcaption>Second image</figcaption>
        </figure>
    </a>
</div>

edited Jun 24 '15 at 08:51

gman

100,619
31
269
393

answered Apr 12 '12 at 17:50

McGarnagle

101,349
31
229
260

1

You'll need an HTML5 shim for most of IE, though. – ceejayoz Apr 12 '12 at 17:53
13

Those tags do not help in any way. They are just dummy markup, and you need to do all the work in CSS (and/or with other HTML tags). And you need an extra operation to make old versions of IE to recognize them even as dummy tags. So it is simpler to use `div` or `span`. – Jukka K. Korpela Apr 12 '12 at 19:54
18

@JukkaK.Korpela These tags are very important. http://stackoverflow.com/a/17272444/756329 and http://html5doctor.com/lets-talk-about-semantics/ – Joseph Hansen Oct 09 '14 at 17:10
8

The problem is this: `[figures] can be moved to another page or to an appendix without affecting the main flow`. `
` and `
` aren't general-purpose replacements for images with captions. They *only* apply to figures. If you (for example) have a step-by-step how-to that is composed of paragraphs intermixed with captioned photos, it may be important that the images are presented at the same paragraph breaks as defined in the html. Hence `
` would not be applicable here (as I understand).
– Ponkadoodle Apr 03 '16 at 06:49
I'd add that these lines do not *necessarily* place a figure caption under an image. The HTML given here describes the content, but the appearance is affected/determined by CSS. – jvriesem Nov 12 '19 at 21:46

score 25 · Answer 2 · answered Apr 12 '12 at 18:08

CSS

#images{
    text-align:center;
    margin:50px auto; 
}
#images a{
    margin:0px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
 }

HTML

<div id="images">
    <a href="http://xyz.com/hello">
        <img src="hello.png" width="100px" height="100px">
        <div class="caption">Caption 1</div>
    </a>
    <a href="http://xyz.com/hi">
        <img src="hi.png" width="100px" height="100px"> 
        <div class="caption">Caption 2</div>
    </a>
</div>

A fiddle is here.

score 14 · Answer 3 · answered Sep 18 '19 at 14:54

For responsive images. You can add the picture and source tags within the figure tag.

<figure>
  <picture>
    <source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
    <source media="(min-width: 500px)" srcset="images/image.jpg" />
    <img src="images.jpg" alt="An image">
  </picture>
  <figcaption>Caption goes here</figcaption>
</figure>

score 9 · Answer 4 · edited Jan 13 '16 at 13:41

9

Put the image — let's say it's width is 140px — inside of a link:

<a><img src='image link' style='width: 140px'></a>

Next, put the caption in a and give it a width less than your image, while centering it:

<a>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.

<a style='text-decoration: none; color: orange;'>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example: http://www.alphaeducational.com/p/okay.html

edited Jan 13 '16 at 13:41

gordon613

2,770
12
52
81

answered Mar 21 '13 at 16:39

Susie

99
2
2

2

Block tags like `
` are not allowed inside inline tags like `` - you should use `` for the captions.
– mindplay.dk Jan 22 '15 at 09:48
Replacing
with fails totally in @TheAlpha's example. Looks like you need
.
– Pierre Oct 11 '15 at 15:09
@mindplay.dk I think because the `a` tag's content model is transparent it can accept any children that the parent tag can (except for interactive content). Correct me if I'm wrong? I want to learn. http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element – Chris Bier Jan 05 '16 at 18:17
@Pierre because `span` is an inline element. You could use `span` or `div`, but you'd need to add `display: inline-block;`. – RedGuy11 Aug 28 '21 at 22:34

score 8 · Answer 5 · answered Apr 12 '12 at 17:52

<div style="margin: 0 auto; text-align: center; overflow: hidden;">
  <div style="float: left;">
    <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px"></a>
    caption 1
  </div>
 <div style="float: left;">
   <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px"></a>
   caption 2                      
 </div>
</div>

score 3 · Answer 6 · answered Apr 12 '12 at 18:00

CSS is your friend; there is no need for the center tag (not to mention it is quite depreciated) nor the excessive non-breaking spaces. Here is a simple example:

CSS

.images {
    text-align:center;
}
.images img {
    width:100px;
    height:100px;
}
.images div {
    width:100px;
    text-align:center;
}
.images div span {
    display:block;
}
.margin_right {
    margin-right:50px;
}
.float {
    float:left;
}
.clear {
    clear:both;
    height:0;
    width:0;
}

HTML

<div class="images">
    <div class="float margin_right">
        <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px" /></a>
        <span>This is some text</span>
    </div>
    <div class="float">
        <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px" /></a>
        <span>And some more text</span>
    </div>
    <span class="clear"></span>
</div>

score 2 · Answer 7 · answered Sep 11 '19 at 09:40

To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this:

HTML

<div class="items">
<figure>
    <img src="hello.png" width="100px" height="100px">
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="hi.png" width="100px" height="100px"> 
    <figcaption>Caption 2</figcaption>
</figure></div>

CSS

.items{
text-align:center;
margin:50px auto;}


.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}

https://jsfiddle.net/c7borg/jLzc6h72/3/

score 1 · Answer 8 · edited Sep 22 '19 at 06:16

1

The <figcaption> tag in HTML5 allows you to enter text to your image for example:

<figcaption>
Your text here
</figcaption>.

You can then use CSS to position the text where it should be on the image.

edited Sep 22 '19 at 06:16

JJJ

32,902
20
89
102

answered Sep 22 '19 at 05:58

Vee5

19
2

score -4 · Answer 9 · answered Apr 12 '12 at 19:56

-4

<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>

Style as desired.

answered Apr 12 '12 at 19:56

Jukka K. Korpela

195,524
37
270
390

11

I would never do this. The person is asking for presentation advice not how to display content in tabular format. – Mike Kormendy Apr 01 '14 at 04:46

How to write a caption under an image?

9 Answers9

Linked

Related