2021年8月29日

【CSS】<figcaption>要素の幅を画像に合わせたい

画像とキャプションを<figure>要素と<figcaption>要素を使用してマークアップした場合、画像とキャプションの幅が揃わないことがあります。

そのようなケースで、画像とキャプションの幅を揃えたければ、以下のコードをCSSで<figure>要素と<figcaption>要素に設定すれば対応できます。

コード例

figure {
  display: table;
}

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

<figure>要素のdisplayプロパティの値をtableにします。tableにすることで<figure>要素の幅が中身に合うようになります。

<figcaption>要素のdisplayプロパティの値をtable-captionにします。この設定をしないと、画像の幅よりもキャプションが長い場合、キャプションの長さが<figure>要素の幅になるので、キャプションは画像の幅と揃いません。

<figcaption>要素のcaption-sideプロパティの値をbottomにします。caption-sideプロパティは初期値がtopなので、この設定をしないとキャプションは画像の上に表示されます。

<figure>要素をセンター揃えにしたい場合は、margin-leftプロパティとmargin-rightプロパティの値をautoに設定します。