Auto-align Images CSS Snippet for Obsidian

This CSS snippet automatically centers all images (JPEG, PNG, etc.) in your Obsidian notes when in Preview Mode. It ensures a clean and consistent layout for images in your notes, improving the visual presentation.

Copyright : Siam Mehraf

Website : https://siammehraf.net

Features

• Auto-centering: All images will be centered in Obsidian's preview mode.
• Simple and easy to implement: Just add the CSS snippet to your Obsidian CSS folder.

Instructions to Use

Step 1: Download the CSS File

1. Download or copy the Auto-align Images CSS Snippet for Obsidian file from this repository.

Step 2: Add the CSS Snippet to Obsidian

1. Open Obsidian.
2. Go to Settings (click the gear icon in the lower-left corner).
3. Under the Appearance tab, scroll down to CSS snippets.
4. Click Open snippets folder.
   • If you don’t see the "CSS snippets" option, make sure you have enabled Custom CSS under Appearance settings.
5. Place the Auto-align Images CSS Snippet for Obsidian file into the snippets folder.
6. After adding the file, go back to the CSS snippets section in Obsidian settings.
7. Enable the snippet by toggling the switch next to Auto-align Images CSS Snippet for Obsidian.

Step 3: View in Preview Mode

• This snippet only works in Preview Mode. Switch to preview mode by clicking on the Preview button (the eye icon) in the upper-right corner of your note or by using the shortcut Ctrl/Cmd + E.

The images in your notes will now be automatically centered when viewing the note in preview mode.

Notes

• This CSS snippet affects only the preview mode of your notes in Obsidian. It won’t change the appearance of images in Edit Mode.
• If you want to modify or customize this snippet, feel free to edit the Auto-align Images CSS Snippet for Obsidian file to suit your needs.

---

Feel free to reach out to me at siammehraf.net for any questions or feedback.