Inconsistencies in snippets in source mode and reading view

[rosshjb]

Steps to reproduce

I want the image to be centered, so I’m using the following stylesheet:

img[alt*="center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

or

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

I am attaching images within my documents like this:

![center|50](Pasted%20image%2020260304122128.png)

or

![50](Pasted%20image%2020260304122128.png)

respectively.

Looking at it through the developer tools, it seems like reading view and source mode have different DOM structures. This is why images aren’t centered in source mode. In previous versions, they worked fine in source mode:

Expected result

images center aligned

Actual result

styles applied to images don’t work in source mode.

Environment

SYSTEM INFO:
Obsidian version: 1.12.4
Installer version: 1.8.4
Operating system: Darwin Kernel Version 25.3.0: Wed Jan 28 20:53:15 PST 2026; root:xnu-12377.81.4~5/RELEASE_ARM64_T6000 25.3.0
Login status: logged in
Language: en
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 1
Restricted mode: on

[dawni]

Things did change, but overall, Reading and Source have always had different DOMs.

Here’s an image-centering snippet for v1.12.4:

Image centring CSS broken as of v1.12.4

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 …

[ariehen]

There were some changes to Obsidian’s structure; I’d guess due to the new image resizing feature.

Give this a try:

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

edit: dawni beat me to it