Align Image

Share & showcase Workflows & Templates
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]]

19 Likes
Alignment of image is not working
2

mad respect :clap:,you made my day.

1 Like
4

Its very useful , many thanks

5

That’s exactly what I was looking for! I do have some follow-up questions, though:
Any idea if it’s possible to set a dinamic variable to the image float so that it positions it according to the value you assign to it? That’s not that much of a necessary thing, just curious!

6

This doesn’t work anymore in ‘Edit’ views(source mode) in version 1.12.4.

This below will work: