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