My question intends to understand the concept behind. In the end I would like to center an <img> inside of a <figure>. There are several solutions out there. But I don’t understand them well. What I need to understand first is how a figure really works. I assuming this would make it more easier to validate the solutions out there.
Example code:
<!DOCTYPE html>
<body style="background-color: yellow;">
<figure style="background-color: green;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAIAA
ADajyQQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad
5mH3gAAABnSURBVGhD7c8BDQAgDMAw7F0nF4qOkiU10HNnv1RMU0xTTFNMU0xTTFNMU0x
TTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNM
U0zzaWz2AU8XpdIsmIu3AAAAAElFTkSuQmCC">
</figure>
</body>
</html>
The rendered result:
What I understand is that the figure (green box) use the full width by default. That is fine for me. So it won’t make sense to center the figure. To my understanding I need to center the image inside of the figure.
What