In February, u/PurpleArrowhead posted a CSS rule to center images using alt text, but it was broken by an Obsidian update. I created a new version of this that works with the updated Obsidian version:
- By default aligns all images to the center
- Aligns images to the left by adding “right” to the alt options: `![[image.jpg|right]]` or `![[image.jpg|right|500]]` (and the same to align to the left)
- Seems to work well with the current state of Obsidian and image sizing
/* Default: Align all images in center */
.markdown-source-view.mod-cm6 .cm-content > * {
margin: 0 auto !important;
}
.markdown-preview-view img {
display: block;
margin-inline: auto;
}
/* right align (add "right" to the alt attribute like: ![[image.png|right]] or ![[image.png|right|size]] */
.markdown-source-view.mod-cm6 .cm-content[alt*="right"] > * {
margin: 0 auto !important;
}
.markdown-source-view.mod-cm6 .cm-content [alt*="right"] {
margin-left: auto !important;
margin-right: 0 !important;
}
/* left align (add "left" to the alt attribute like: ![[image.png|left]] or ![[image.png|left|size]] */
.markdown-source-view.mod-cm6 .cm-content[alt*="left"] > * {
margin: 0 auto !important;
}
.markdown-source-view.mod-cm6 .cm-content [alt*="left"] {
margin-left: 0 !important;
margin-right: auto !important;
}
I thought this might be useful to others. Any improvements or simplifications?
