Skip to content

Instantly share code, notes, and snippets.

@DavidWells
Last active May 27, 2023 21:56
Star You must be signed in to star a gist
Embed
What would you like to do?
Guide to aligning images in github readme.md files. https://davidwells.io/snippets/how-to-align-images-in-markdown

Aligning images

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.

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

@Natrexq
Copy link

Natrexq commented Oct 16, 2022

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

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