Is it possible to center an image in CSS and left-align its caption below so the text remains the same width as the image even when it consists of multiple lines and always stays aligned to the left edge of the image?
It seemed to me like this must be very easy but indeed I could not find a solution without specifying a width to the container.
Here the simplest setup I could think of but it breaks with multi-line-caption.
.image-wrapper{ display: table; margin: 0 auto;}
<div class="container"><div class="image-wrapper"><img src="https://picsum.photos/200/300" alt="Image"><div class="caption">Your Caption Text Here But What If It Spans Multiple Lines</div></div></div>