Skip to content

Instantly share code, notes, and snippets.

@DavidWells
Last active March 23, 2024 14:02
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.

@colinwilson
Copy link

<br clear="left"/>

@cjshearer Wow! Thanks 👍

@aarushiramesh
Copy link

Thank you!

@stephaneK123
Copy link

+1

@willie-hung
Copy link

Thanks!

@dtbsisco
Copy link

dtbsisco commented Jul 5, 2021

Thanks!

@DevonHJames
Copy link

Hi, @DavidWells. I'm looking to align an image to the left or right side, but adjacent to the image, I want to add text. So, I want to do pretty much the same thing that you did in your Left Alignment and Right Alignment examples. How can I achieve this?

@surajsahani
Copy link

any idea for local gif? how to add

@Akh0
Copy link

Akh0 commented Oct 6, 2021

Thanks!

@rk0cc
Copy link

rk0cc commented Oct 10, 2021

Noice

@goshlanguage
Copy link

Thanks for the gist! 🥇

@surajsahani you can link it to your relative path, relative to your README.md. If you had a gif called my.gif in your top level directory, same as your README, it'd look like:

<p align="center">
  <img src="./my.gif">
</p>

Directory:

# tree               
.
├── README.md
├── my.gif

@surajsahani
Copy link

thanks @goshlanguage

@ShamelJij
Copy link

wow it works! danke schön!

@chengengliu
Copy link

I found out how to center a local image using only HTML.

<center>
    <img src="assets/images/grin-logo.png">
</center>

Finally.

This woks like a charm. Thanks!

@RitamChakraborty
Copy link

RitamChakraborty commented May 25, 2022

I was trying to do the same with gifts. But I'm having issue

I was creating a README file for my GitHub profile, but having trouble aligning gifts.

In VsCode I wrote the mark down like this...

<img src="./assets/hello-dark.gif#gh-light-mode-only" align="right" height="220" width="210" />
<img src="./assets/hello-light.gif#gh-dark-mode-only" align="right" height="220" width="210" />

<h1>Ola Amigos!</h1>
<h2>Me Ritam</h2>
<h3>Nice to meet ya</h3>

Which was coming like this..

image

But when I did the same in GitHub it rendered as this...

image

I tried to make some changes and come up with this...

# Ola Amigos!

<p>
  Me Ritam<br>
  Nice to meet Ya!
  <p align="right">
    <img src="./assets/hello-dark.gif#gh-light-mode-only" alt="hello-dark" height="220" width="210" />
    <img src="./assets/hello-light.gif#gh-dark-mode-only" alt="hello-light" height="220" width="210" />
  </p>
</p>

And it rendered as as this...

image

My question is, is there a way to overlap the text and images, so that the text and the image can be in same line?

@Alejandroacho
Copy link

@RitamChakraborty What you are trying was working a couple of days before with gifs. But now is not. I'm looking for a solution too, if you find something please let me know 😄

@ferPrieto
Copy link

ferPrieto commented May 27, 2022

The way to fix it is mentioned here

@RitamChakraborty
Copy link

The way to fix it is mentioned here

The person with the settings not enabled will not be able to see a gif align right, right?

@ferPrieto
Copy link

ferPrieto commented May 27, 2022

Yes exactly that, it's not about an issue of the Readme structure but about the new settings that will affect the preview @RitamChakraborty

@zachmsdev
Copy link

For any poor soul still trying to clear an image alignment (where a tall image aligned left will "spill" over to the next section), choose one of the following:

<br clear="left"/>
<br clear="right"/>
<br clear="both"/>

For example:

<img align="left" src="https://cloud.githubusercontent.com/assets/532272/21507867/3376e9fe-cc4a-11e6-9350-7ec4f680da36.gif">

some text aligned to the right of the image

<br clear="left"/>

and some text that is below the image (without an obnoxious number of <br /> tags).

produces

3376e9fe-cc4a-11e6-9350-7ec4f680da36.gif

some text aligned to the right of the image

and some text that is below the image (without an obnoxious number of <br /> tags).

You are amazing

@EvelynAdams
Copy link

awesome, thanks!!

@Poxios
Copy link

Poxios commented Sep 19, 2022

Awesome!

@alitheDev
Copy link

Thanks Mate.

@natankalinowski
Copy link

Thx a lot <3

@0E9B061F
Copy link

Thanks, friend

@vishwac09
Copy link

Thanks a lot

@eddyjav
Copy link

eddyjav commented Jan 4, 2023

Thanks a lot 🔥

@rockysushant
Copy link

How to draw a line in readme file?

@Reelix
Copy link

Reelix commented Apr 12, 2023

How to draw a line in readme file?

3 dashes

---

@rockysushant
Copy link

and how to put spaces between two images vertically?

@rockysushant
Copy link

and how to put spaces between two images vertically?

@RitamChakraborty
Copy link

RitamChakraborty commented Apr 13, 2023

and how to put spaces between two images vertically?

No Gap

<p>
    <img src="https://picsum.photos/100/100" >
    <img src="https://picsum.photos/100/100" >
</p>


Horizontal Gap

With hspace property you can set horizontal (left and right) padding for an image

<p>
    <img src="https://picsum.photos/100/100" hspace="10" >
    <img src="https://picsum.photos/100/100" hspace="10" >
</p>


Vertical Gap

We also have a property "vspace", which does what it sounds like, add vertical spacing. But it doesn't seem to work on GitHub, unlike VSCode's buit in markdown viewer. So probably just add a <p> tag in between.

<p>
    <img src="https://picsum.photos/500/100" >
    <p>
    <img src="https://picsum.photos/500/100" >
    <p>
    <img src="https://picsum.photos/500/100" >
</p>

@ihsanunot
Copy link

Thank you very much, this so helped me a lot :)

@timmy-cde
Copy link

is it possible to overlap 2 images?

@ivanglushko
Copy link

after aligning with "center" it renders the content below as centered :(

@ivanglushko
Copy link

ivanglushko commented May 12, 2023

after aligning with "center" it renders the content below as centered :(

Fixed it instead of <div> you should use <p> and put your images in there this way it doesnt center the rest of the content.
Screenshot 2023-05-12 at 13 02 40

And tip for bordering like in the pic above you can use <kbd></kbd> tag wrap your <p> or <img> in it

@AuracleTech
Copy link

Stopped working

@Ringoshere
Copy link

When I move it to the left or right, the text below gets put up alongside the image. How can I avoid that happening? I tried multiple
but no luck.
This is the format I need...
Screenshot 2023-08-18 at 10 46 48 AM

@RitamChakraborty
Copy link

When I move it to the left or right, the text below gets put up alongside the image. How can I avoid that happening? I tried multiple but no luck.

You can try something like this

<img align="right" src="https://picsum.photos/300/200" alt="image" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five 
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



image

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

@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.

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