Support rendering of markdown links and images inside of HTML

Feature requests
1

Use case or problem

I want to center an image in my document. Surprisingly, Obsidian does not support this.
The approach I tried was this: Why doesn't this image get centered?

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>

Proposed solution

Allow me to use links to files and images inside of span and div HTML tags, to allow CSS styles to be applied to them?

Current workaround (optional)

I haven’t found one yet.

1 Like
2

Did you ever find a solution to this?

3

Yes, apologies for not posting it.

Solution

Put this code in your .obsidian/snippets folder:

/* This class centers every image anywhere in Obsidian 

*/
.centerImg img {
  display: block;
  margin: auto ;
}

Then put this in your frontmatter:

cssclass: centerImg

Now all your images in that file should be centered.

4

Thanks!