Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
4 tasks done
nextguyover opened this issue Feb 2, 2024 · 4 comments
Closed
4 tasks done
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@nextguyover
Copy link

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>

image

Related links

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

@squidfunk squidfunk added the needs investigation Issue must be investigated by the maintainers label Feb 2, 2024
@alexvoss alexvoss added the 🕞 answer in progress Discussion is being answered label Feb 2, 2024
@alexvoss
Copy link
Sponsor Collaborator

alexvoss commented Feb 2, 2024

@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.

@alexvoss alexvoss removed the 🕞 answer in progress Discussion is being answered label Feb 2, 2024
@squidfunk
Copy link
Owner

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 squidfunk added bug Issue reports a bug and removed needs investigation Issue must be investigated by the maintainers labels Feb 2, 2024
@squidfunk
Copy link
Owner

squidfunk commented Feb 2, 2024

Fixed in 5b9bcb1.

@squidfunk squidfunk added the resolved Issue is resolved, yet unreleased if open label Feb 2, 2024
@squidfunk
Copy link
Owner

Released as part of 9.5.7.

bmwiedemann pushed a commit to bmwiedemann/openSUSE that referenced this issue Feb 7, 2024
https://build.opensuse.org/request/show/1144834
by user dirkmueller + anag+factory
- skip build for python 3.12

- update to 9.5.8:
  * Added Tamil translations
  * Updated Esperanto translations
  * Fixed relative images not being resolved for instant
    navigation

- update to 9.5.7:
  * Fixed #6731
    <squidfunk/mkdocs-material#6731>:
    Small images in figures are not centered
  * Fixed #6719
    <squidfunk/mkdocs-material#6719>:
    Instant navigation breaks table of contents (9.5.5 regression)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open
Projects
None yet
Development

No branches or pull requests

3 participants