Why doesn't this image get centered?

[wealthychef]

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' />

[CawlinTeffid]

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

@CawlinTeffid

Maybe you need to add file:// to the start of the path

[mnvwvnm]

and you changed the css snippet to the code above?

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

[wealthychef]

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.

@CawlinTeffid

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

@CawlinTeffid

Maybe you need to add file:// to the start of the path

@mnvwvnm

and you changed the css snippet to the code above?

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

@mnvwvnm

---
cssclass: centerImg
---

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.

[mnvwvnm]

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?)

[wealthychef]

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

[CawlinTeffid]

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.

[ninjineer]

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.

[wealthychef]

@CawlinTeffid

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.

It does not seem to work with me that way. When I use this markdown and CSS snippet, the image is not centered:

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

## HTML and centerImg with encodings
<img class='centerImg' 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:

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

result

Notice how the image is not centered

[wealthychef]

@ninjineer

When it comes to Obsidian, there’s a whole mess of CSS going on.

Haha yes I’ve noticed that quite a bit. I have not been able to really grok the overall Obsidian picture to the point where I can reason reliably about how it uses CSS. Are there design docs which hint as to describe the interplay of markdown, html and CSS in Obsidian? I’m gathering that the knowledge on this subject belongs mainly in the brain trust on this forum

[CawlinTeffid]

@wealthychef

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

That selects an img within an element that has the class “centerImg”. You want to directly select that class (remember to remove the cssclass from the front matter):

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

[wealthychef]

@CawlinTeffid

You want to directly select that class (remember to remove the cssclass from the front matter):

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

Thank you!

• I can now center any image I wish using the .centerImg class

[wealthychef]

The full solution recap:

Put this in a CSS snippet:

/* Image centering.  
    To center an individual image, use this syntax (HTML only, fragile links)
        <img class='centerImg' src='IMAGE_URL' />         
 */
.centerImg {
  display: block;
  margin: auto ;
}

Put this in your markdown:

<img class='centerImg' src='IMAGE_URL' />

where IMAGE_URL is a fully encoded valid URL such as file://, http:// etc.