titulo - etiquetas html

Cómo alinear el título debajo de la imagen

Question

Tengo 9 imágenes en total y tres en cada fila, he logrado agregar un título para una de mis imágenes, pero no pude hacerlo para las otras ya que solo centra todo debajo y el texto no alineado en filas por imagen.

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

Y así.

Answer 1

Cada figura solo debe contener una imagen y una figura.

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

Por cierto ... el elemento ''centro'' ya no existe.

Ejemplo de Codepen

Answer 2

Configuraría el código de esta manera:

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

y aplique el siguiente 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;
}

Como cada figure es un bloque en línea, básicamente puede repetir la unidad tres veces por fila, ya sea añadiendo un <br> después de cada tercio, o envolviendo tres en un elemento de bloque, o usando un nth-of-type(3n) CSS3 nth-of-type(3n) selector para agregar un salto de línea o similar.

Use text-align: center en figcaption para alinear la prueba al centro.

Vea la demostración en: http://jsfiddle.net/audetwebdesign/4njG8/

Los resultados se ven así (para una pantalla suficientemente amplia):