Align Image

Share & showcase
1

This works for both ‘Edit’ and ‘Read’ views

  • Make a “Image Align.css” file in the snippets folder with the following snippet.
img[alt*="center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img[alt*="right"] {
    float:right;
    clear:right;
    margin-left: 1rem;
    margin-bottom: 2px;
    margin-top: 2px;
}

  • From “Appearance” settings turn “Image Align” on.

  • In the obsidian edit, insert an image.

  • For Left alignment
    ![[image_name]]

  • For Right alignment
    ![[image_name | right]]

  • For Center alignment
    ![[image_name | center]]

For various image sizes you can add the desired size after the alignment.
Example: ![[imagename | center | 100]]

8 Likes
2

mad respect :clap:,you made my day.

3

Hello,

You are creating a CSS snippet for image alignment in Obsidian! Here’s a concise guide based on your description:

Step-by-Step Guide to Create Image Alignment in Obsidian
Create the CSS File:

Navigate to the snippets folder in your Obsidian vault.
Create a new file named Image Align.css.
Add the CSS Snippet:

Open the Image Align.css file and add the following code: img[alt*=“center”] {
display: block;
margin-left: auto;
margin-right: auto;
}

img[alt*=“right”] {
float: right;
clear: right;
margin-left: 1rem;
margin-bottom: 2px;
margin-top: 2px;
}
Enable the Snippet in Obsidian:

Go to Settings → Appearance.
Scroll down to the CSS Snippets section.
Find the “Image Align” snippet and toggle it on.
Insert Images in Obsidian:

To insert an image in your notes, use the following syntax based on your desired alignment:

Left Alignment: ![[image_name]]
Right Alignment: ![[image_name | right]]
Center Alignment: ![[image_name | center]]
Specify Image Size: You can specify the desired size after the alignment as follows:
Example for center alignment with a specified width: ![[image_name | center | 100]]

Hope that helps!

1 Like
4

Its very useful , many thanks