CSSでfigcaptionを画像の幅に揃える方法

ブログやニュースサイトの記事などで、figureを使って画像をマークアップする時、キャプションのfigcaptionを画像の幅からはみ出させないようにする方法です。

ごにょごにょやってたら出来たのでシェアシェア〜

スッキリしたhtmlとcssで簡単に実装できます！

実装のポイント

ポイントは、
figure{display:table;}と、
figcaption{display:table-caption; caption-side:bottom;}。caption-sideはキャプションの位置を調整します。デフォは画像の上につきます。

Chrome / Safari / Firefox / IE11 / Edge / iOS Safari で動作確認。Androidはエミュレータが調子悪かったので確認してませんw