Image alignment in figure is not centered when image smaller than figcaption

[nextguyover]

Context

No response

Bug description

Creating a figure with an image that is smaller than the width of the figcaption prevents the image from being center aligned?

<figure markdown>
![](https://images.unsplash.com/photo-1619252584172-a83a949b6efd){ width="200" }
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>

Related links

• Reporting a bug
• https://squidfunk.github.io/mkdocs-material/reference/images/#image-captions

Reproduction

figure-center-bug.zip

Steps to reproduce

1. Unzip and run the project with mkdocs serve
2. Open page at http://127.0.0.1:8000/

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[alexvoss]

@squidfunk, does this text in the admonition in the section on image aligment mean that people should expect images in figures with captions are centered?

Instead, the image captions syntax can be used, as captions are optional.

This is not default HTML behaviour, so should be more explicitly said that the CSS does this. The mechanism, I assume is the text-align: center; set for a figure?

It seems possible to use an empty caption to center an image that does not really need a caption. This seems to come out with a hight of zero but still has a space on the screen. Might that interfere with other things?

Once the issue is fixed, can we take the bit about centering images that have a caption out of the admonition? It seems too common a use case to hide it away.

What I do to center images is to add extra css. I assign images a class with attribute lists and set the width of the image to something like 80% and then define margins along these lines.

[squidfunk]

So, it's right that the content of the figure itself is currently not centered. I suppose that until now, users have only used images that are larger than the figure, which then gets shrunk via aspect ratio. I agree that the expected behavior for smaller images is certainly that the image is centered nonetheless, so we should change that in our CSS.

[squidfunk]

Fixed in 5b9bcb1.

[squidfunk]

Released as part of 9.5.7.