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.

Answer 1

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):