How to align caption underneath image

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

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.