Установите ширину figcaption из img и выровняйте

Question

Для отображения цифр я использую

       <figure>
  <img …>
  <figcaption>This is a longer caption that may wrap lines.</figcaption>
</figure>

Теперь я пытаюсь получить через CSS следующее:

1. figure находится по центру страницы по горизонтали.
2. figcaption имеет ту же ширину, что и img. Это важно для обтекания строк.
3. Ширина исходит от img.
4. figcaption выравнивается по левому краю с img.

Другими словами, я хочу вот что (рамки для ясности):

Я взломал макет выше, дав figure явный width (т.е. нарушение 3 выше), но, конечно, это не очень желательно.

Как мне заставить это работать? Я должен посмотреть в layout: flex?

Answer 1

Min -content + flex или grid могут помочь, display;table тоже работает, чтобы уменьшить фигуру до самого широкого элемента.

фрагмент для игры ниже

         body {/* if the matter is to center on the center of the window */
  margin: 0;
  display: grid;/*or */  /* display:flex;*/  /*also works*/
  min-height: 100vh;
}

figure {
  background:yellow;
  /* center x,y*/
  margin: auto;
  /* without a flex or grid parent, make it a block that can shrink and center horizontally
  display:block; */
  
  /* shrink to the single widest content */
  width: min-content;
  /* or/and  instead  block
  display:table;
  width:0;
  */
}

         <figure>
  <img src="https://dummyimage.com/100">
  <figcaption>This is a longer caption that may wrap lines untill a word is wider than the image itself.</figcaption>
</figure>