Set images left-aligned in Typora

user_7301792 0
Viewed 3610

By default, Typora set all the images center-aligned.

image

I searched through the github.css but did not found img.

$ grep img "/Users/me/Library/Application Support/abnerworks.Typora/themes/github.css"
#return no matches

How could I set images left-aligned?

markdown css
3 Answers

Found this ridiculously simple but maybe unstable solution by accident: put a space character after the image. Actually, any character works, so to make it more visible I've put the letter 's' after the image in this example:

enter image description here

Tested in Typora version 0.9.93 (Beta).

user_14914260

You can edit CSS file of your theme.

Go to File > Preference or press Ctrl+Comma. In Themes, click Open Theme Folder.

image

Open the CSS file of your theme. For example, I'm using Github theme.

image

Search for img {} in CSS file. In github.css, I didn't find any img {}. If you don't find img {}, you can write one. Then, set the display and align-items as below.

img {
    display: -webkit-flex;
    -webkit-align-items: flex-start;
    display: flex;
    align-items: flex-start;
}

Alignment before applying above CSS properties:

image

Alignment after applying above CSS code:

image

Note: (Sometimes but not necessarily) In some conditions, while editing the file, if cursor is somewhere between the images or images link, it can show the image in center temporarily. But if you change the position of cursor away from the images, it results well.

Hope it helps!

user_103729000

According to the official document here, to left aligned a img by adding following code in github.css or yourTheme.css:

p .md-image:only-child{
    width: auto;
    text-align: left;
}
user_18650370
Related