Skip to content

Instantly share code, notes, and snippets.

@DavidWells

DavidWells/aligning-images.md

Last active June 6, 2026 13:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DavidWells/7d2e0e1bc78f4ac59a123ddf8b74932d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DavidWells/7d2e0e1bc78f4ac59a123ddf8b74932d to your computer and use it in GitHub Desktop.
Download ZIP
Guide to aligning images in github readme.md files. https://davidwells.io/snippets/how-to-align-images-in-markdown
Raw
aligning-images.md

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

RitamChakraborty commented Apr 17, 2026 •
edited
Loading

Copy link
Copy Markdown

Use `align="left" on image

<img align="left" src="https://picsum.photos/150/100" alt="image" />
<p align="right">
<h4>More About Me!</h4>
> <b>i͟n͟t͟e͟r͟e͟s͟t͟s͟<br></b>INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO 
</p>
<img align="left" src="https://picsum.photos/150/100" alt="image" />
<p>
> <b>d͟y͟f͟ + d͟n͟i͟<br></b>INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO 
</p>

image

More About Me!

> i͟n͟t͟e͟r͟e͟s͟t͟s͟
INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO

image

> d͟y͟f͟ + d͟n͟i͟
INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO INFO


Visit Discord Fonts to generate underlined text.

@sungsun0

sungsun0 commented May 25, 2026

Copy link
Copy Markdown

THANK YOU SO SO MUCHHH WAAAA

@RitamChakraborty

RitamChakraborty commented May 30, 2026

Copy link
Copy Markdown

THANK YOU SO SO MUCHHH WAAAA

❤️

@ire-landd

ire-landd commented Jun 1, 2026

Copy link
Copy Markdown
IMG_7197

It just does this

@RitamChakraborty

RitamChakraborty commented Jun 6, 2026

Copy link
Copy Markdown

Try this.

<p align="center">
<img src="https://api.visitorbadge.io/api/visitors?path=Ire-landd&label=%EA%AB%82%E2%9D%81&labelColor=%23ff7ce&countColor=%23ffb6d&style=flat" alt="Visitor Count" />
</p>

Visitor Count

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