How to align caption underneath image

Question

I have 9 images in total and three on each row, I have managed to add a caption for one of my images, but failed to do so for the other ones as it just centers everything underneath and not aligned text to rows per image.

<figure>
<center>
<img src='images/album1.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>
</figure><center>

And so on.

`` was deprecated about 15 years ago. – j08691 Oct 02 '13 at 14:01 — j08691, Oct 02 '13 at 14:01

Marc Audet · Accepted Answer · 2013-10-02T14:24:01.413

58

I would set up the code this way:

<figure>
    <img src='http://placehold.it/200x200' alt='missing' />
    <figcaption>Album name goes here
        <br>Year goes here
        <br>artist name goes here</figcaption>
</figure>

and apply the following CSS:

figure {
    display: inline-block;
    border: 1px dotted gray;
    margin: 20px; /* adjust as needed */
}
figure img {
    vertical-align: top;
}
figure figcaption {
    border: 1px dotted blue;
    text-align: center;
}

Because each figure is an inline-block, you can basically repeat the unit three times per row, either adding a <br> after the every third one, or wrapping three in a block element, or using a CSS3 nth-of-type(3n) selector to add a line break or similar.

Use text-align: center on figcaption to align the test to the center.

See demo at: http://jsfiddle.net/audetwebdesign/4njG8/

The results look like this (for a wide enough screen):

enter image description here

edited Oct 02 '13 at 14:24

answered Oct 02 '13 at 14:13

Marc Audet

46,011
11
63
83

1

This is really in depth Marc. I'm giving it a shot right now and thanks in regards! – Brian Lam Oct 02 '13 at 20:37
1

I would like to add that if your figure captions have unequal heights, you you can still align the images by adding `figure { vertical-align: top; ... }`. – Sam De Meyer Jan 11 '18 at 13:15
If you have long text (in the "Album name goes here..." ), then this stretches out the image container unfortunately so some hard-coding is required – information_interchange Mar 01 '18 at 03:53
Suppose I wanted the first line of images to have only 2 images, and the second line to have 3. For example, maybe the first two belong to one album, the next three belong to another album, and you want everything from an album to be grouped together. Using the code given, a
will not place the third image on a new line but will display it to the side but not aligned with the other two. – Victor Engel Oct 09 '22 at 23:03

score 2 · Answer 2 · edited Jan 22 '21 at 20:37

2

this works for me.

figure {
  display: inline-block;
  text-align: center;
  border: 1px dotted gray;
  margin: 5px; /* adjust as needed */
}
figure img {
  vertical-align: top;
}
figure figcaption {
  border: 1px dotted blue;
}

text-align: center; is the only thing needed.

edited Jan 22 '21 at 20:37

TylerH

20,799
66
75
101

answered Mar 21 '18 at 03:05

anatak

440
2
7
16

this is actually more general than the current accepted answer, since this will also work if the text is wider than the image. – amenthes Apr 12 '18 at 21:49

Paulie_D · Answer 3 · 2013-10-02T14:14:26.943

1

Each figure should only contain one image and one figcaption.

<figure>
    <img>
   <figcaption>
   </figcaption>
</figure>

BTW...the 'center' element no longer exists.

Codepen Example

edited Oct 02 '13 at 14:14

answered Oct 02 '13 at 14:05

Paulie_D

107,962
13
142
161

You forgot a > after **figvaption** tag. – Gurminder Singh Oct 02 '13 at 14:10
I see, I will give it another shot and see if that fixes it. – Brian Lam Oct 02 '13 at 14:11
Also, what do mean about no longer existing? Is there a better way to implement it or? – Brian Lam Oct 02 '13 at 14:13
The center tag was deprecated in HTML5 – Paulie_D Oct 02 '13 at 14:15

rahul-ahuja · Answer 4 · 2021-08-03T07:11:33.780

Image caption alignment in jupyter notebook markdown cell:
(includes: how to adjust text alignment margins and font style)

<table>
    <tr>
    <td style='text-align:center;'>
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
             style='zoom:65%;'> <b> Tree and Sun </b><img>
    </td>
    <td> 
        <img src="https://cdn.pixabay.com/photo/2015/04/23/21/59/tree-736877__340.jpg" 
             style='zoom:91%;'/>
    <p style='text-align: right; margin-right: 3em; font-family: Serif;'><b> Moon and meow </b></p>
    </td>
    </tr>
</table>

score 0 · Answer 5 · answered Jan 02 '21 at 06:01

It is enough to provide alignment attribute in the figcaption: text-start, text-center and text-end

<figure>
   <img src='http://placehold.it/150x150' alt='missing' class="figure-img img-fluid rounded-circle"/>
   <figcaption class="figure-caption text-center">Name</figcaption>
</figure>

How to align caption underneath image

5 Answers5

Linked