Skip to content

Instantly share code, notes, and snippets.

@DavidWells

DavidWells/aligning-images.md

Last active April 29, 2026 00:22
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
Copy link
Copy Markdown

RitamChakraborty commented Dec 1, 2023

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
Copy Markdown

ruizlenato commented Mar 19, 2024

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

@cyb3rko
Copy link
Copy Markdown

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
Copy Markdown

RitamChakraborty commented Apr 8, 2024

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)

@sarahsturgeon
Copy link
Copy Markdown

sarahsturgeon commented Jul 3, 2024

Having trouble aligning a small image vertically with my text:

Library Name • 0/30 • Easy

Example content

<details>
<summary><a href="https://whatever.com"><code>Library Name</code></a> • <strong><code>0/30</code></strong> • <img alt="Easy" src="https://img.shields.io/badge/Easy-32CD32"></summary>

Example content
</details>

align="middle" does have an effect, but not quite the one I intended...

Library Name • 0/30 • Easy

Example content

Making the image smaller seems to make it align better, but then it's too small:

Library Name • 0/30 • Easy

Example content

Any advice?

@RitamChakraborty
Copy link
Copy Markdown

RitamChakraborty commented Jul 14, 2024

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

@sarahsturgeon
Copy link
Copy Markdown

sarahsturgeon commented Jul 14, 2024

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
Copy Markdown

yvele commented Sep 11, 2024

Looks to be not working anymore 🤔

image

@azat-io
Copy link
Copy Markdown

azat-io commented Sep 11, 2024

The same problem. It not woking anymore

@mkingvc
Copy link
Copy Markdown

mkingvc commented Sep 11, 2024

Same here. Looks like GitHub changed something recently.

@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