Image centring CSS broken as of v1.12.4

[PurpleArrowhead]

Since the update allowing for image resizing, the below CSS to centre images on screen does not work as expected. Behaviour is unchanged in Reading mode, but fails in Live Preview.

img[alt='centre'] {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

After mucking about in Inspect, I’ve found that the below adjustment might be a viable solution

img[alt='centre'] {
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-right: 50;
    padding-left: 20;
}

The problem here is automatically adjusting padding size to fill the screen size.

I think I need to be able to extract the width from “cm-content cm-lineWrapping” and “img“ but I’m not sure how to do that.

If anyone knows this, or another way of centring the image in Preview mode, I would appreciate it greatly.

[ariehen]

Can confirm that previous snippets for centering images in live preview aren’t working anymore.

---

With a quick look, it seems this default rule

.markdown-source-view.mod-cm6 .cm-content > * {
  margin: 0 !important;
  display: block;
}

is affecting internal image embeds now; previously it was only an issue for external image embeds in live preview.

So you could add a snippet of

.markdown-source-view.mod-cm6 .cm-content > * {
  margin: 0 auto !important;
}

but that will center all images in live preview. One option is using a cssclass to only center images in a note with that cssclass (both live preview and reading view)

.markdown-source-view.mod-cm6.centre .cm-content > * {
  margin: 0 auto !important;
}

.markdown-preview-view.centre img {
  display: block;
  margin-inline: auto;
}

---

Had another look and this is working on my end using alt text:

img[alt*="center"],
.cm-content .image-embed[alt*="center"] {
  display: block;
  margin-inline: auto !important;
}

[PurpleArrowhead]

Thank you so much for that. The centre all option works excellently for my purposes.

Just to make it a little clearer for anyone else reading this, for the centre all option, remove the `.centre` or else the formatting applies to a css class, I presume?

[ariehen]

For centering all images, in all notes across the vault, remove the cssclass from both sections so

.markdown-source-view.mod-cm6 .cm-content > * {
  margin: 0 auto !important;
}

.markdown-preview-view img {
  display: block;
  margin-inline: auto;
}

I haven’t tested all scenarios and on the phone now, but that seems working.

---

This is also an option to center all images, in all notes:

img,
.markdown-source-view .cm-content .image-embed {
  display: block;
  margin-inline: auto !important;
}