Skip to content

Instantly share code, notes, and snippets.

@DavidWells
Last active April 25, 2024 10:57
Show Gist options
  • Save DavidWells/7d2e0e1bc78f4ac59a123ddf8b74932d to your computer and use it in GitHub Desktop.
Save DavidWells/7d2e0e1bc78f4ac59a123ddf8b74932d to your computer and use it in GitHub Desktop.
Guide to aligning images in github readme.md files. https://davidwells.io/snippets/how-to-align-images-in-markdown

Aligning images

This is a guide for aligning images.

See the full Advanced Markdown doc for more tips and tricks

left alignment

This is the code you need to align images to the left:

<img align="left" width="100" height="100" src="https://picsum.photos/100/100">

right alignment

This is the code you need to align images to the right:

<img align="right" width="100" height="100" src="https://picsum.photos/100/100">

center alignment example

<p align="center">
  <img width="460" height="300" src="https://picsum.photos/460/300">
</p>

Markdown Formatting on steriods

If you like this, you might enjoy markdown-magic. I built it to automatically format markdown files and allow folks to sync docs/code/data from external sources.

@bad1dea
Copy link

bad1dea commented Nov 28, 2023

Is there any way to have multiple images vertical on left.. and a code block on right side? Every time I try, the code block starts at the last image...

image

@RitamChakraborty
Copy link

Try this...

<img align="right" src="https://picsum.photos/700/480" alt="image" />
<img src="https://picsum.photos/150/100" alt="image" />
<img src="https://picsum.photos/150/100" alt="image" />
<img src="https://picsum.photos/150/100" alt="image" />
<img src="https://picsum.photos/150/100" alt="image" />

image

image

image

image

image

@ruizlenato
Copy link

image
does anyone have any idea how I can fix this? the Heading line crosses over the image

@cyb3rko
Copy link

cyb3rko commented Mar 20, 2024

@ruizlenato I have seen the same issue in many different repositories now.
Seems like GitHub changed something about the Markdown rendering.

@RitamChakraborty
Copy link

Can this not be fixed with few line breaks? (<br>)


Twittergram

Twittergram

Twittergram is a bot for telegram written in golang using the telego library with localization support (i18n) and some twitter-related functions, such as downloading media and sending it to telegram.

See more at @twittergramrobot or @xgramrobot



Donate — Help keep the project alive and up-to-date.

Donate with Ko-Fi

Licensed under the terms of the GNU General Public License v3 (GPLv3)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment