SNIPPETsiammehraf

Css Snippets

All Obsidian CSS Snippets by Siam Mehraf

CSSAny theme
# 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](https://siammehraf.net) for any questions or feedback.

How to Install

  1. Download the CSS file below
  2. Move it to your vault's .obsidian/snippets/ folder
  3. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Download snippet.css

Stats

Stars

0

Forks

0

Last updated 14mo ago