Jak dopasować podpis pod zdjęciem

Question

Mam 9 zdjęć w sumie i trzy w każdym wierszu, Udało mi się dodać podpis do jednego z moich obrazów, ale nie udało mi się zrobić dla innych, ponieważ to po prostu centruje wszystko pod spodem i tekst nie jest wyrównany do wierszy na obraz.

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

I tak dalej.

Answer 1

chciałbym skonfigurować kod w ten sposób:

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

i zastosować następujące 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; 
} 

Ponieważ każdy figure jest inline-block, można w zasadzie powtórz jednostkę trzy razy w rzędzie, dodając po co trzecim <br> lub zawijając trzy w bloku lub używając CSS3 nth-of-type(3n) selektor, aby dodać podział wiersza lub podobne.

Użyj text-align: center na figcaption, aby wyrównać test do środka.

Zobacz demo pod adresem: http://jsfiddle.net/audetwebdesign/4njG8/

Wyniki wyglądać następująco (na tyle szeroki ekran):

Answer 2

Każda cyfra powinna zawierać tylko jedno zdjęcie i jedną fig.

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

BTW ... element "centrum" już nie istnieje.

Codepen Example