Why doesn't this image get centered?

Things I have tried

I put this in my app.css file:

/* Image centering.  This does not work for some reason yet.  */
span.centerImg {
  display: block !important;
  margin: auto !important;
}

And this code in my markdown:

<span class='centerImg'> ![[2022-09-27.11.58.45.CleanShot.Finder 1.png|300]] </span>

What I’m trying to do

I’m following this thread: Center images using CSS
I’m hoping the image will be centered but it is not. Can someone help explain why this is not working? Thank you!

Does that even show the image? I thought Obsidian doesn’t render Markdown inside HTML.

2 Likes

I thought not too, but it looks like it does show up in Reading mode. Not in Editing mode.

I have a feeling it isn’t supported though.

1 Like

It only shows the image in reader mode if I remove the size specifier, but I do wish to specifiy the size. It never shows the image in Edit mode.

<span class='centerImg'> ![[2022-09-27.11.58.45.CleanShot.Finder 1.png]] </span>
1 Like

I can get it to show up with the size indicator. Maybe it is the extra periods in your filename that are throwing it off when inside html tags. Except I just tested that and it works too… And I tested a filename with both a period and a space in it. It worked too. Weird.

But again, I really have a feeling this is unsupported.

1 Like

Yeah, I’d guess it’s a fluke that the image is rendered at all.

1 Like

I can get it to show up with the size indicator. Maybe it is the extra periods in your filename that are throwing it off when inside html tags. Except I just tested that and it works too… And I tested a filename with both a period and a space in it. It worked too. Weird.

@rigamarole So the exact same code I’m using works for you but not for me? That’s interesting.
When you say you tested a filename, can you post the CSS and markdown/html you used to make it work? Thanks

It’s important to you only one specific image or can it be all images in the same file?

It’s important to you only one specific image or can it be all images in the same file?

I would like it to apply to specific images. Do you have a solution for the “all images” case?

For all images in the same file you can use a cssclass in frontmatter.
For example:

/* css snippet */
.centerImg img {
  display: block !important;
  margin: auto !important;
}

Then you just need to add in frontmatter

---
cssclass: centerImg
---

And place images in normal markdown format:

![[2022-09-27.11.58.45.CleanShot.Finder 1.png|300]]
2 Likes

I tried your example and it makes no difference for the display in Edit or View modes. I wonder what’s different about my file setup…

What is the basis for this thought? Is that in a design document somewhere? Thanks!

It’s a common way for Markdown to behave, plus I’ve seen moderators state it more than once. Here’s an example which also links to some related feature requests:

I don’t see it documented in Help (based on a search for “HTML”).

1 Like

it looks like maybe the right approach is to create a feature request : Support rendering of markdown links and images inside of HTML

In the meantime you could just use HTML.

<img class='centerImg' src='2022-09-27.11.58.45.CleanShot.Finder 1.png' />

(You probably need to include the full path of the image, but you get the idea.)

That’s the general idea with Markdown — when things get too fancy for it, you can drop back to HTML.

1 Like

alternative to @CawlinTeffid suggestion, you may also use a combination of css and Markdown Attributes plugin. the downside is that it works with reading view only.


example markdown

![[filename.jpg|200]] { .center-img }

css per below. the plugin add the .center-img class to span containing the <img> tag

.center-img img {
    display: block;
    margin: auto;
}
2 Likes

Thanks, but of course the downside is that the link becomes fragile and that link flexibility is precisely why I use Obsidian. However it is probably the approach I’ll have to take in the meantime, so I appreciate you giving this to me.

EDIT: I tried this approach and strangely it did not work for me, meaning no image is displayed at all. The file exists and is valid.

<img class='centerImg' src='/Volumes/2_TB_SSD_external/Projects_2TB/computers-and-geekery/projects and languages/Obsidian development/wealthyvault/assets/2022-09-27.11.58.45.CleanShot.Finder 1.png'>
file '/Volumes/2_TB_SSD_external/Projects_2TB/computers-and-geekery/projects and languages/Obsidian development/wealthyvault/assets/2022-09-27.11.58.45.CleanShot.Finder 1.png'
/Volumes/2_TB_SSD_external/Projects_2TB/computers-and-geekery/projects and languages/Obsidian development/wealthyvault/assets/2022-09-27.11.58.45.CleanShot.Finder 1.png: PNG image data, 546 x 303, 8-bit/color RGBA, non-interlaced

Thanks, I’ll check that out as well, but since I don’t have much use for Reader view it sounds like this won’t be my best approach.

Maybe you need to add file:// to the start of the path and/or URL encode the path? (In this case I think encoding just means replacing all the spaces with %20.)

True. But hopefully you’re less likely to move or rename your image files than your notes?

1 Like

I really don’t know what’s going on. It works from my side (I’m still using the public Obsidian version, not the insider one)