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]]

4 Likes