Centering images in the post 1.12.4 era

Share & showcase
1

We’ve enjoyed a leisurely and not particularly specific set of snippets for centering images that just happened to work in both Live Preview and Reading View. e.g.

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

/* or */

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

With the recent changes, they are no longer working.

Don’t know how the situation will change going forward, but here are some options for now.

Center all images (internal and external) in all notes → 

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

Center all images (internal and external) using a cssclass of center-img in certain notes →

Screenshot 2026-03-04 141321
Screenshot 2026-03-04 141321267×103 2.42 KB

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

Center only images (internal) with center added →

Links written as ![[image.jpg|center|200]] or ![center|200](image.jpg)

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

Center only images (internal) with #center added →

Links written as ![[image.jpg#center|200]] or ![200](image.jpg#center)

img[src$="#center"], 
span[src$="#center"],
div[src$="#center"],
.markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer .cm-content .image-embed[src$="#center"] {
  display: block;
  margin-inline: auto !important;
  width: fit-content; /* for Minimal */
}

or

img[src$="#center"], 
span[src$="#center"],
div[src$="#center"],
.cm-content .image-embed[src$="#center"] {
  display: block;
  margin-inline: auto !important;
  width: fit-content !important; /* for Minimal */ 
}

Centering external embedded images using |center or #center in live preview needs a bit more (to be used with the above); most folks probably won’t need these but I went down this rabbit hole so I’ll post 'em.

/* [center|200](https://example.com.jpg) */

/* default theme */
.markdown-source-view.mod-cm6 .cm-content > .image-embed:has(img[alt*="center"]) {
  margin: 0 auto !important;
}

/* Minimal theme */
.markdown-source-view.mod-cm6 .cm-content > .image-embed:has(img[alt*="center"]) {
  justify-content: center;
}

and

/* ![](https://example.com/.jpg#center) */

/* default theme */
.markdown-source-view.mod-cm6 .cm-content > .image-embed:has(img[src$="#center"]) {
  margin: 0 auto !important;
}

/* Minimal theme */
.markdown-source-view.mod-cm6 .cm-content > .image-embed:has(img[src$="#center"]) {
  justify-content: center;
}

notes

  • I don’t use |center or #center much, but I do have a bunch of notes using a center image cssclass; it’s where I first noticed the issue.
  • I did my best to check different scenarios using the default and Minimal themes, but may have missed something. Safety not guaranteed.
  • Will update as needed.
  • Happy centering!
2 Likes
2

I (LLM) recently just reconfigured Bold + Italics to centering blocks

/* bold + italics to centered */
.markdown-source-view.mod-cm6.is-live-preview {
  /* If a line contains bold+italic text, center the whole line */
  .cm-line:has(.cm-strong.cm-em:not(.cm-formatting)) {
    text-align: center;
  }
  /* Remove bold + italic styling */
  .cm-strong.cm-em:not(.cm-formatting),
  .cm-strong .cm-em:not(.cm-formatting),
  .cm-em .cm-strong:not(.cm-formatting) {
    font-style: inherit !important;
    font-weight: inherit !important;
  }
}

Obsidian_NdPIU4T6HA
Obsidian_NdPIU4T6HA1920×1040 123 KB