More than 3 years have passed since last update.

キャプションを画像幅に合わせる

Posted at 2021-03-24

メディア系にて

<figure>
  <img src="https://placehold.jp/400x200.png" alt="">
  <figcaption> なが〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜いキャプション</figcaption>
</figure>

figure {
  display: table;
}
figcaption {
  display:table-caption ;
  caption-side:bottom;
  margin: 10px 0 0 0;
}

caption-sideというプロパティ初めて知ったけど、どのブラウザでも効く模様
https://caniuse.com/?search=caption-side