The min-content keyword gives us the width of the largest unbreakable element inside the box (i.e., the widest word or image or fixed-width box). This is exactly what we need! Now, giving our figures an appropriate width and horizontally centering them as simple is two lines of code: Fall back for older browser doesn't work unless you know exact…

CSS Intrinsic Sizing

figure {
  width: min-content;
  margin: auto;
}

HTML

<p>Some text […]</p>
<figure>
    <img src="adamcatlace.jpg" />
    <figcaption>
        The great Sir Adam Catlace was named after
        Countess Ada Lovelace, the first programmer.
    </figcaption>
</figure>
<p>More text […].</p>

 

Intrinsic sizing fallback

/**
 * Intrinsic sizing
 */

figure {
	max-width: 300px;
	max-width: min-content;
	margin: auto;
}

figure > img { max-width: inherit }

/* Basic styling */

figure {
	padding: 10px;
	border: 1px solid silver;
}