Why doesn't this image get centered?

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)

Here is what happens in my vault:

Here is the source:

---
cssclass: centerImg
---

## Technique 0: normal transclusion, resized, no centering. 
![[2022-09-27.11.58.45.CleanShot.Finder.png|300]]

## Technique 1:  mixed markdown and html "<span>" or "<div>"
<span class='centerImg'> ![[2022-09-27.11.58.45.CleanShot.Finder.png]] </span>
<div class='centerImg'> ![[2022-09-27.11.58.45.CleanShot.Finder.png]] </div>

## Technique 2: pure html
<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.png' />

<img class='centerImg' src='/Volumes/2_TB_SSD_external/Projects_2TB/computers-and-geekery/projects%20and%20languages/Obsidian%20development/wealthyvault/assets/2022-09-27.11.58.45.CleanShot.Finder.png' />

I added this to my last post but it might have been after you’d already read it:

1 Like

and you changed the css snippet to the code above?

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

Centering all images works now.

Combining the cssclass, centerImg and html with encodings and file:// prefix does work for centering every image in the file. It is not quite the complete solution to my actual use case, but it is interesting progress and for the perhaps common case where all images need centering, it does seem to be a good solution. It even works in Edit mode!

Thanks very much for that! I’d love to hear more about centering individual images, but it seems this is impossible at the moment if I understand correctly.

Working code

Markdown

---
cssclass: centerImg
---

## normal transclusion, resized, no centering. 
![[2022-09-27.11.58.45.CleanShot.Finder.png|300]]

## Using file:// in the URL cssclass, the css snippet, and encoded URL
<img src='file:///Volumes/2_TB_SSD_external/Projects_2TB/computers-and-geekery/projects%20and%20languages/Obsidian%20development/wealthyvault/assets/2022-09-27.11.58.45.CleanShot.Finder.png' />

CSS

/* Image centering.  This only works on every image in a file
   Requires cssclass: centerImg in frontmatter
     */
.centerImg img {
  display: block !important;
  margin: auto !important;
}

The result

Editorial Aside: Obsidian’s Achille’s Heel

This is of course Obsidian’s biggest achilles heel in my opinion, the difficulty of making basic formatting work. More than made up for by improved thinking but still a bit aggravating to be unable to color text or to center an image without a few hours on the forum. :slight_smile:

I guess you forget one extra-player: the theme.
Using no-default theme may influence this kind of results (who’s the culprit of the !important need?)

Good point.

Regarding !important

I just use !important on every css declaration that I have any problems with, because I really don’t understand its function and it only ever seems to help. :slight_smile: In this case, it is not necessary and removing it from the snippet does not change the behavior.

cssclass

I also do not understand the cssclass YAML declaration here.

Regarding non-default theme change

I did try using the default theme early on and it made no difference in my earlier trials with individual images.

1 Like

If you’re using HTML you shouldn’t need the cssclass because you can set classes on the img tags. Just set the centering class on the ones you want centered.

<img class="centerImg" src="etc.jpg" />

You’ll need to adjust your CSS a little to match.

The cssclass applies a class to the whole note, which you can then use to target things in notes which have that class. But you don’t need it to target raw HTML.

1 Like

Regarding !important

The Cascading part of CSS defines a number of rules that govern which defined style applies to a given element. The !important keyword is an override that gives that particular style more precedence than it would normally have in the regular cascade of the defined styles.

For example, say you defined the following CSS for paragraphs:

p
{
color: red;
color: blue;
}

All your paragraphs would be written in blue text, because that is the last defined style. However, if you introduce the !important keyword like below:

p
{
color: red !important;
color: blue;
}

Then all the paragraphs will be displayed in red text, as that style has been given greater precedence than it would normally have.

When it comes to Obsidian, there’s a whole mess of CSS going on. And when you define your own CSS snippets, they don’t always end up with the highest precedence. Using !important helps make sure your snippet’s style winds up on top.

1 Like