Inconsistencies in snippets in source mode and reading view

Bug reports
1

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:

image
image1566×454 25.7 KB

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

2

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

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

2 Likes
3

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 :purple_heart:

2 Likes