Why doesn't this image get centered?

Custom CSS & Theme Design
1

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!

2

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

2 Likes
3

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
4

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
5

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
6

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

1 Like
7

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

8

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

9

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?

10

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
11

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…

12

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

13

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
14

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

15

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
16

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
17

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
18

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.

19

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
20

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)