Как выровнять подпись под изображением

Question

У меня есть 9 изображений в общей сложности и по три на каждой строке, мне удалось добавить подпись для одного из моих изображений, но не удалось сделать это для других, поскольку она просто центрирует все под ним и не выровненный текст в строки на изображение.

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

И так далее.

Answer 1

Я бы настроить код так:

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

и примените следующий 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; 
} 

Поскольку каждый figure является встроенный блок, вы можете в основном повторите блок три раза в строке, либо добавив <br> после каждого третьего, либо обернув три в элемент блока, либо используя CSS3 nth-of-type(3n), чтобы добавить разрыв строки или аналогичный.

Используйте text-align: center на figcaption, чтобы выровнять тест по центру.

См демо по адресу: http://jsfiddle.net/audetwebdesign/4njG8/

Результаты выглядят следующим образом (для достаточно широкий экран):

Answer 2

Каждая фигура должна содержать только одно изображение и один рисунок figcaption.

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

BTW ... элемент «center» больше не существует.

Codepen Example