figcaptionを中央に配置し最大幅を兄弟要素に揃える方法

figure要素とfigcaption要素をいい感じに表示させるために、先人たちは苦労してきました。

WordPress の場合、キャプション付き画像 (wp-caption) では、figure要素のstyle属性にwidthプロパティを設定しています。画像ブロック (wp-block-image) では、figure要素をtable要素として、figcaption要素をcaption要素として扱うという、裏技的なテクニックを使用しています。

今回は、figcaption要素を中央に配置して、その最大幅を兄弟要素に揃える、正攻法で汎用的な方法を紹介します。

1. figure要素の幅を内包要素に合わせる

figcaption要素の最大幅を兄弟要素に揃えるには、それらの親要素であるfigure要素の幅を、その兄弟要素 (内包要素) に合わせる必要があります。

WordPress のキャプション付き画像 (wp-caption) では、figure要素のstyle属性に画像と同じ幅になるようwidthプロパティを追加していますが、今は内包要素の寸法に合わせる fit-content という便利な値があります。

…
<style>
figure {
  inline-size: fit-content;
    max-inline-size: 100%;
  margin-inline: auto;
}
</style>
…
<figure>
  <img … />
  <figcaption> … </figcaption>
</figure>
…

内包要素が大きいと、figure要素が親要素から突き抜けてしまうことがあるので、max-inline-size: 100%; も設定します。

逆に内包要素が小さいと、figure要素の右側 (書字方向によっては左側) に大きな余白ができるので、margin-inline: auto; で中央に配置します。

2. figcaption要素の幅を兄弟要素に揃える

figcaption要素もfigure要素の内包要素なので、figcaption要素内の文章量が多いと、figure要素の幅を押し広げ、兄弟要素以上の幅になってしまう場合があります。

WordPress の画像ブロック (wp-block-image) では、caption要素の幅がtable要素の幅以上にならないという特徴を利用するために、figure要素に display: table; を、figcaption要素に display: table-caption; を設定しています。いい感じに表示されますが、他の不具合を誘発する可能性のある、良くないテクニックです。

実は安全な方法でfigcaption要素の幅をfigure要素の幅以下に抑えることができます。

…
<style>
…
figcaption {
  inline-size: 0;
  min-inline-size: fit-content;
  margin-inline: auto;
}
</style>
…
<figure>
  <img … />
  <figcaption> … </figcaption>
</figure>
…

それが、今回のキモとなる inline-size: 0; です。これだけだと本当に幅が 0px になってしまうので、min-inline-size: fit-content; も併せて設定します。

inline-sizeプロパティ、min-inline-sizeプロパティ、max-inline-sizeプロパティが同時に設定されていた場合、inline-sizeプロパティよりもmax-inline-sizeプロパティが、max-inline-sizeプロパティよりもmin-inline-sizeプロパティが優先されます。これは、block-sizeプロパティ、widthプロパティ、heightプロパティでも同様です。

この仕様により、min-inline-size: fit-content; が優先されます。そして、兄弟要素の幅以上にもなりません。

文章量が少ない時は margin-inline: auto; によって中央に配置されます。text-alignプロパティを使用していないので、複数行になった場合は左揃え (書字方向によっては右揃え) になります。

まとめ

CSSコードをまとめると、次のようになります。コピペして使ってみてください。

figure {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
}
figcaption {
  inline-size: 0;
  min-inline-size: fit-content;
  margin-inline: auto;
}

CodePen

〆

外は春の嵐。