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