Skip to content

Instantly share code, notes, and snippets.

@DavidWells

DavidWells/aligning-images.md

Last active May 11, 2026 21:28
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.

@azat-io
Copy link
Copy Markdown

azat-io commented Sep 11, 2024

Looks like it was fixed

@rahaaatul
Copy link
Copy Markdown

rahaaatul commented Sep 23, 2024

is there a way to add rounded border outside images?

@bishos123
Copy link
Copy Markdown

bishos123 commented Sep 24, 2024

Thanks guys!

@danielvartan
Copy link
Copy Markdown

danielvartan commented Sep 26, 2024

👏👏👏

@Sofia-A-Fayo-Freites
Copy link
Copy Markdown

Sofia-A-Fayo-Freites commented Sep 27, 2024

Thank you. Just what i needed.

@WillTheFarmer
Copy link
Copy Markdown

WillTheFarmer commented Jan 6, 2025

Nice, slick feature! Thank you!

@eiarcadia
Copy link
Copy Markdown

eiarcadia commented May 8, 2025

its just coming up with a white cube?
image

@kalnode
Copy link
Copy Markdown

kalnode commented May 19, 2025

In my Github repo readme, this is how I place three thumbnails in a row:

Width is explicitly set to 30% for conservative reasons. If you attempt wider, like 33.3%, the final computed style on your Github repo main page may force a wrap of the third image to a new line (undesired).

I use wrappers because many of my thumbnails link to a larger version.

<p>
	<a href="https://picsum.photos/400/400" target="_blank">
		<img src="https://picsum.photos/100/100" width="30%" height="auto">
	</a>
	<a href="https://picsum.photos/400/400" target="_blank">
		<img src="https://picsum.photos/100/100" width="30%" height="auto">
	</a>
	<a href="https://picsum.photos/400/400" target="_blank">
		<img src="https://picsum.photos/100/100" width="30%" height="auto">
	</a>
</p>

@sungsun0
Copy link
Copy Markdown

sungsun0 commented Apr 10, 2026

I'm not sure how to add text next to stacked images. This is what I want and I'm not sure how to execute it. The '>' are opening and closing bullet points
Screenshot 2026-04-10 160704

@RitamChakraborty
Copy link
Copy Markdown

RitamChakraborty commented Apr 17, 2026 •
edited
Loading

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.

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