Skip to content

Instantly share code, notes, and snippets.

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="http://www.fillmurray.com/100/100">

right alignment

This is the code you need to align images to the right:

<img align="right" width="100" height="100" src="http://www.fillmurray.com/100/100">

center alignment example

<p align="center">
  <img width="460" height="300" src="http://www.fillmurray.com/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

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

Alejandroacho commented May 26, 2022

@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

RitamChakraborty commented May 27, 2022

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

zachmsdev commented Aug 4, 2022

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

EvelynAdams commented Aug 11, 2022

awesome, thanks!!

@Poxios
Copy link

Poxios commented Sep 19, 2022

Awesome!

@alitheDev
Copy link

alitheDev commented Sep 29, 2022

Thanks Mate.

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