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.

@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