Bagaimana untuk align caption dibawah gambar dengan css

Saya akan share tutorial pertama saya. cara melakukan align caption dibawah gambar. Yang sudah paham css, langsung saja lihat kode berikut :

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

dan ini mode css nya :

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

Disini, saya menggunakan inlite-block, supaya gambar berada didalam kotak, dan tipe css ini sudah dibungkus figure(contoh: figure figcaption). ini dimaksudkan agar tulisan dibawah gambar bisa berada di caption tengah.

Ini hasil gambarnya :

Anda bisa mencobanya dengan gambar yang anda suka. Terima Kasih.