Centering Images in Obsidian

Properties2

Type	Practice
Note created	Mar 17, 2026

To center an image in Obsidian (especially in preview mode), I use a CSS snippet to control the alignment by adding center as part of the alt text using the pipe syntax:

![Alt text | center | 200](url)

This requires the image-alignment CSS snippet to be enabled in Settings > Appearance > CSS snippets. The full snippet:

/* Center images with "center" in alt text: ![alt | center | 200](url) */
 
/* Live preview: image inside div.image-embed */
div.image-embed:has(img[alt*="center"]) {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
 
/* Reading mode / embeds: image inside p tag */
p:has(> img[alt*="center"]) {
  text-align: center !important;
}