Come allineare la didascalia sotto l'immagine

Question

Ho 9 immagini in totale e tre su ogni riga, sono riuscito ad aggiungere una didascalia per una delle mie immagini, ma non l'ho fatto per le altre in quanto si limita a centrare tutto sotto e testo non allineato a righe per immagine.

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

E così via.

Answer 1

vorrei impostare il codice in questo modo:

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

e applicare il seguente 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; 
} 

Poiché ogni figure è un inline-block, si può sostanzialmente ripetere l'unità tre volte per riga, aggiungendo uno <br> dopo il terzo o avvolgendo tre in un elemento del blocco o utilizzando un CSS3 01 Selettoreper aggiungere un'interruzione di riga o simile.

Utilizzare text-align: center su figcaption per allineare il test al centro.

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

I risultati simile a questa (per uno schermo abbastanza ampio):

Answer 2

Ogni figura deve contenere solo un'immagine e una figura.

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

BTW ... l'elemento 'centro' non esiste più.

Codepen Example