Guide to aligning images in github readme.md files. https://davidwells.io/snippets/how-to-align-images-in-markdown

aligning-images.md

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.

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

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

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

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?

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

The way to fix it is mentioned here

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?

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

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

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

awesome, thanks!!

Awesome!

Thanks Mate.

Thx a lot <3

Thanks, friend

Thanks a lot

Thanks a lot 🔥

How to draw a line in readme file?

How to draw a line in readme file?

3 dashes

---

and how to put spaces between two images vertically?

and how to put spaces between two images vertically?

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>

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

is it possible to overlap 2 images?

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

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.

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

Stopped working

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

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.

---

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.