Skip to content

Instantly share code, notes, and snippets.

@DavidWells
Last active January 13, 2025 21:09
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.

@RitamChakraborty
Copy link

Use align="center"

<details>
    <summary>
        <a href="https://whatever.com"><code>Library Name</code></a>
        <span> โ€ข </span>
        <strong><code>0/30</code></strong>
        <span> โ€ข </span>
        <img align="center" alt="Easy" src="https://img.shields.io/badge/Easy-32CD32">
    </summary>
    Example content
</details>
Library Name โ€ข 0/30 โ€ข Easy Example content

@brandonsturgeon
Copy link

I was confused because your post had the same issue as mine, but then I checked on Chrome and it looked good!

half-win; thank you ๐Ÿ‘

@yvele
Copy link

yvele commented Sep 11, 2024

Looks to be not working anymore ๐Ÿค”

image

@azat-io
Copy link

azat-io commented Sep 11, 2024

The same problem. It not woking anymore

@mkingvc
Copy link

mkingvc commented Sep 11, 2024

Same here. Looks like GitHub changed something recently.

@azat-io
Copy link

azat-io commented Sep 11, 2024

Looks like it was fixed

@rahaaatul
Copy link

is there a way to add rounded border outside images?

@bishos123
Copy link

Thanks guys!

@danielvartan
Copy link

๐Ÿ‘๐Ÿ‘๐Ÿ‘

@Sofia-A-Fayo-Freites
Copy link

Thank you. Just what i needed.

@WillTheFarmer
Copy link

Nice, slick feature! Thank you!

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