画像とキャプションの幅をfigureとdisplay:tableで揃える

2024/5/13 CSS

画像の下にキャプションを入れる際、画像の幅と揃える小技です。
今回はfigureとfigcaptionタグで実装します。

表示サンプル

サンプルページは下記URLよりどうぞ。

<figure>
  <img src="dummy.gif">
  <figcaption>
    ダミーテキストダミーテキストダミーテキスト。ダミーテキストダミーテキストダミーテキスト。
  </figcaption>
</figure>

必要部分だけの記述です。
全体をfigureで囲んでいます。

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: bottom;
}

figureに対してdisplay:tableとします。
これによってfigureの幅が要素の幅と同じになります。

次にfigcaptionに対してdisplay:table-captionとします。
これでfigureと同じ幅でキャプションが表示されるようになります。ただ、このままだとキャプションが画像の上に配置されるので、caption-side:bottomを加えキャプションが画像の下にくるようにします。

また、figureを中央合わせにしたい場合には、figureに対してmargin-inline:autoを加える事で実現できます。