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.

@dirkstrauss

This comment has been minimized.

Copy link

@dirkstrauss dirkstrauss commented Aug 3, 2017

Bill is the boss man! Love it!

@sadan

This comment has been minimized.

Copy link

@sadan sadan commented Sep 7, 2017

thank you +1

@LauraRichter

This comment has been minimized.

Copy link

@LauraRichter LauraRichter commented Oct 8, 2017

Thank you!

@alan86alves

This comment has been minimized.

Copy link

@alan86alves alan86alves commented Nov 22, 2017

Thank you!

@CobySoffer

This comment has been minimized.

Copy link

@CobySoffer CobySoffer commented Nov 25, 2017

Thank you!

@nishitpatel01

This comment has been minimized.

Copy link

@nishitpatel01 nishitpatel01 commented Dec 20, 2017

Thanks!

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Dec 26, 2017

Long live Bill Murray!

Thanks!

@arretx

This comment has been minimized.

Copy link

@arretx arretx commented Jan 4, 2018

Cool. So, this negates the following syntax?

![description](path/to/image)

@DavidWells

This comment has been minimized.

Copy link
Owner Author

@DavidWells DavidWells commented Jan 7, 2018

@arretx yeah I don't think you can align with that ![description](path/to/image) syntax. (or I wasn't able to)

@lukebrandonfarrell

This comment has been minimized.

Copy link

@lukebrandonfarrell lukebrandonfarrell commented Apr 12, 2018

Awesome! Thanks

@ndk1996

This comment has been minimized.

Copy link

@ndk1996 ndk1996 commented Apr 23, 2018

thks boss

@gabrielbazan

This comment has been minimized.

Copy link

@gabrielbazan gabrielbazan commented Apr 27, 2018

Thanks!

@MuhammedBuyukkinaci

This comment has been minimized.

Copy link

@MuhammedBuyukkinaci MuhammedBuyukkinaci commented Jun 9, 2018

Thank you.

@imanghafoori1

This comment has been minimized.

Copy link

@imanghafoori1 imanghafoori1 commented Jun 11, 2018

Nice

@JINSOO-PHILIP-KIM

This comment has been minimized.

Copy link

@JINSOO-PHILIP-KIM JINSOO-PHILIP-KIM commented Jun 22, 2018

Sweet!

@zxuqian

This comment has been minimized.

Copy link

@zxuqian zxuqian commented Jul 1, 2018

It works! Thank you!

@Draketheb4dass

This comment has been minimized.

Copy link

@Draketheb4dass Draketheb4dass commented Jul 25, 2018

Thanks man

@nikmuhammadnaim

This comment has been minimized.

Copy link

@nikmuhammadnaim nikmuhammadnaim commented Jul 26, 2018

Nice guide

@endymioncheung

This comment has been minimized.

Copy link

@endymioncheung endymioncheung commented Aug 19, 2018

Brilliant, thank you!

@CarlosBalladares

This comment has been minimized.

Copy link

@CarlosBalladares CarlosBalladares commented Sep 11, 2018

Thank you!

@u112358

This comment has been minimized.

Copy link

@u112358 u112358 commented Sep 17, 2018

Thanks. It helps!

@ivanleoncz

This comment has been minimized.

Copy link

@ivanleoncz ivanleoncz commented Sep 27, 2018

Let me say something that no one said here: THANK U :) 👍 !

@ankur715

This comment has been minimized.

Copy link

@ankur715 ankur715 commented Sep 30, 2018

@emirhangl

This comment has been minimized.

Copy link

@emirhangl emirhangl commented Nov 15, 2018

Thanks a lot man! <3

@intika

This comment has been minimized.

Copy link

@intika intika commented Nov 23, 2018

Thanks !

@Xunnamius

This comment has been minimized.

Copy link

@Xunnamius Xunnamius commented Dec 10, 2018

For gitlab, I had to use div instead of p but align="center" did the trick!

@moof-moof

This comment has been minimized.

Copy link

@moof-moof moof-moof commented Dec 12, 2018

Elegant! Tack!

@blacknwhite5

This comment has been minimized.

Copy link

@blacknwhite5 blacknwhite5 commented Jan 4, 2019

Thanks!

@harshkakashaniya

This comment has been minimized.

Copy link

@harshkakashaniya harshkakashaniya commented Jan 5, 2019

Thank you very much.

@mantou132

This comment has been minimized.

Copy link

@mantou132 mantou132 commented Jan 12, 2019

Thanks!

@navin-moorthy

This comment has been minimized.

Copy link

@navin-moorthy navin-moorthy commented Feb 15, 2019

Thank you so much

@StygianTheBest

This comment has been minimized.

Copy link

@StygianTheBest StygianTheBest commented Feb 28, 2019

Cool. So, this negates the following syntax?

![description](path/to/image)

If you preface the P tag with a hash # it will work.

ps - Bill Murray is awesome.

@joshuapinter

This comment has been minimized.

Copy link

@joshuapinter joshuapinter commented Mar 10, 2019

Anyway to clear: both after the image so that tall images don't spill into the next H1 or H2 sections?

@bartvanderwal

This comment has been minimized.

Copy link

@bartvanderwal bartvanderwal commented Mar 14, 2019

+1 on a way to do a clear: both as @joshuapinter mentioned (e.g. without reverting to plain HTM if possible).

I need me a good old 'clearfix' in my docs for nice layout, assuming that no flexbox magic is supported yet? 😄 .

@NateZimmer

This comment has been minimized.

Copy link

@NateZimmer NateZimmer commented Apr 1, 2019

While this does work in github, unfortunately its unsupported by pandocs and the rest of the markdown parsers. Consequently, converting from this to other forms of docs is un-functional(e.g. md --> latex). This is rather frustrating because this is the only feature that motivates me to use .rst as opposed to .md for large project documentation.

@isaumya

This comment has been minimized.

Copy link

@isaumya isaumya commented May 30, 2019

Thank you so much for this. ruly. Can't thank you enough. :)
Also @mousavikahaki, img is a self-closing tag. The max you can write it as <img src="...." />. <img></img> is completely wrong syntax.

@briancodes

This comment has been minimized.

Copy link

@briancodes briancodes commented Jul 5, 2019

From MDN documentation on HTML 4.0:

Note: The align attribute on <p> tags is obsolete and shouldn't be used.

Deprecated in 1997, and still going strong in 2019 😉 Great post 👍

@fitsyu

This comment has been minimized.

Copy link

@fitsyu fitsyu commented Jul 6, 2019

thanks

@wilsson

This comment has been minimized.

Copy link

@wilsson wilsson commented Jul 16, 2019

thanks

@blackcat1383

This comment has been minimized.

Copy link

@blackcat1383 blackcat1383 commented Jul 26, 2019

thank you! <3

@Navneet-Sahota

This comment has been minimized.

Copy link

@Navneet-Sahota Navneet-Sahota commented Aug 18, 2019

Thanks

@pioz

This comment has been minimized.

Copy link

@pioz pioz commented Aug 21, 2019

Cool. So, this negates the following syntax?
![description](path/to/image)

If you preface the P tag with a hash # it will work.

ps - Bill Murray is awesome.

@arretx How? Can you post here a sample code please?

@rafegoldberg

This comment has been minimized.

Copy link

@rafegoldberg rafegoldberg commented Sep 6, 2019

@lzurutuza

This comment has been minimized.

Copy link

@lzurutuza lzurutuza commented Sep 13, 2019

thanks!

@drscotthawley

This comment has been minimized.

Copy link

@drscotthawley drscotthawley commented Sep 19, 2019

When I try the center alignment example with my Jekyll-based github.io page, it looks fine in GitHub Preview, but for the rendered page on github.io, it replaces the code that reads

<p align="center">
  <img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>

with this instead:

<p align="center">
   &lt;img  width="460" height="300" src="http://www.fillmurray.com/460/300" &gt;
</p>

and so the page only shows the url, not the image. Suggestions?

@AlidaContreras

This comment has been minimized.

Copy link

@AlidaContreras AlidaContreras commented Oct 6, 2019

Gracias !!

@simonprovost

This comment has been minimized.

Copy link

@simonprovost simonprovost commented Oct 20, 2019

+1

@MythraUwU

This comment has been minimized.

Copy link

@MythraUwU MythraUwU commented Oct 26, 2019

ty uwu

@salabson

This comment has been minimized.

Copy link

@salabson salabson commented Oct 29, 2019

Thank you

@Reelix

This comment has been minimized.

Copy link

@Reelix Reelix commented Dec 13, 2019

Might want to include the fact that valign="middle" also works for vertical alignment

@artyLee

This comment has been minimized.

Copy link

@artyLee artyLee commented Dec 30, 2019

Thank you so much!

@FedericoTartarini

This comment has been minimized.

Copy link

@FedericoTartarini FedericoTartarini commented Dec 31, 2019

Thanks

@alshdavid

This comment has been minimized.

Copy link

@alshdavid alshdavid commented Jan 2, 2020

How do you add a link to it?

@mayraamaral

This comment has been minimized.

Copy link

@mayraamaral mayraamaral commented Jan 3, 2020

Thank you so much! It worked.

@orhun

This comment has been minimized.

Copy link

@orhun orhun commented Feb 6, 2020

Nice tricks!

@Maratonec

This comment has been minimized.

Copy link

@Maratonec Maratonec commented Feb 25, 2020

Thanks!

@ghafeleb

This comment has been minimized.

Copy link

@ghafeleb ghafeleb commented Feb 27, 2020

Thanks!

@Tarbazar-DevOps

This comment has been minimized.

Copy link

@Tarbazar-DevOps Tarbazar-DevOps commented Mar 3, 2020

Thnks

@budostylz

This comment has been minimized.

Copy link

@budostylz budostylz commented Apr 11, 2020

Very cool, you the man!

@tejasgawali4

This comment has been minimized.

Copy link

@tejasgawali4 tejasgawali4 commented Apr 12, 2020

thanks!

@jiedwards

This comment has been minimized.

Copy link

@jiedwards jiedwards commented Apr 17, 2020

Thank you!

@JamesTrickeyD

This comment has been minimized.

Copy link

@JamesTrickeyD JamesTrickeyD commented Apr 27, 2020

Might want to include the fact that valign="middle" also works for vertical alignment

🥳 🥳 🥳

@jkryanchou

This comment has been minimized.

Copy link

@jkryanchou jkryanchou commented May 7, 2020

Work like charming.

@JuganD

This comment has been minimized.

Copy link

@JuganD JuganD commented May 16, 2020

Great, thanks!

@MalayNagda

This comment has been minimized.

Copy link

@MalayNagda MalayNagda commented May 21, 2020

Cool. So, this negates the following syntax?
![description](path/to/image)

If you preface the P tag with a hash # it will work.
ps - Bill Murray is awesome.

@arretx How? Can you post here a sample code please?

I know this is a late reply, but this worked for me

<p align="center">
<img src="path/to/your/img/in/github/repo.png">
</p>
@devded

This comment has been minimized.

Copy link

@devded devded commented May 30, 2020

Thanks

@jonasdamher

This comment has been minimized.

Copy link

@jonasdamher jonasdamher commented May 30, 2020

easy guide, thanks.

@tafsirony

This comment has been minimized.

Copy link

@tafsirony tafsirony commented Jun 13, 2020

Thanks a lot

@Lawrence-Krukrubo

This comment has been minimized.

Copy link

@Lawrence-Krukrubo Lawrence-Krukrubo commented Jun 14, 2020

Thank you so much @DavidWells

@Henrique82g

This comment has been minimized.

Copy link

@Henrique82g Henrique82g commented Jun 25, 2020

Thanks

@rowin1125

This comment has been minimized.

Copy link

@rowin1125 rowin1125 commented Jul 7, 2020

You're a legend, thanks!

@FatChicken277

This comment has been minimized.

Copy link

@FatChicken277 FatChicken277 commented Jul 9, 2020

love you <3

@metaskills

This comment has been minimized.

Copy link

@metaskills metaskills commented Jul 11, 2020

The only thing I found that "clears" these alignment is a table. The minimal I've been able to come up with is:

<table><tbody><tr><th></th></tr></tbody></table>
@rayrrr

This comment has been minimized.

Copy link

@rayrrr rayrrr commented Jul 20, 2020

Nice one, Venkman!

@midoo1992

This comment has been minimized.

Copy link

@midoo1992 midoo1992 commented Jul 29, 2020

All examples used a source image from internet and not a local stored image. If you use a local stored image, <img don't work for me.

@SazanDawadi

This comment has been minimized.

Copy link

@SazanDawadi SazanDawadi commented Jul 31, 2020

cool

@Paouky

This comment has been minimized.

Copy link

@Paouky Paouky commented Aug 1, 2020

All examples used a source image from internet and not a local stored image. If you use a local stored image, <img don't work for me.

Same here. Anybody knows how to work around this issue?

@Reelix

This comment has been minimized.

Copy link

@Reelix Reelix commented Aug 1, 2020

Sample code to load a locally saved image in an image tag

<img src = 'file://C:/Users/Reelix/Desktop/Protea.png' />

@Paouky

This comment has been minimized.

Copy link

@Paouky Paouky commented Aug 2, 2020

<img src = 'file://C:/Users/Reelix/Desktop/Protea.png' />

Doesn't work, as I said.

@zbigniewstefaniuk

This comment has been minimized.

Copy link

@zbigniewstefaniuk zbigniewstefaniuk commented Aug 7, 2020

<img src = 'file://C:/Users/Reelix/Desktop/Protea.png' />

Doesn't work, as I said.

well man basically you linkin the local image on your pc, rather than you should upload img to repo on git and then link it as http://github.com/and-here-link-to-img

@Abhishekpathania01

This comment has been minimized.

Copy link

@Abhishekpathania01 Abhishekpathania01 commented Aug 11, 2020

I have 2 images, I wanted to display both of them but without having any gap/space in between them. How can I do that, could you please help?

@Paouky

This comment has been minimized.

Copy link

@Paouky Paouky commented Sep 10, 2020

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

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

Finally.

@cihatdev

This comment has been minimized.

Copy link

@cihatdev cihatdev commented Sep 10, 2020

oh thanks

@diego-roberto

This comment has been minimized.

Copy link

@diego-roberto diego-roberto commented Sep 11, 2020

thank you

@CJShearer

This comment has been minimized.

Copy link

@CJShearer CJShearer commented Sep 16, 2020

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

@metaskills

This comment has been minimized.

Copy link

@metaskills metaskills commented Sep 16, 2020

Holy crap! Thanks

@nicolas15000

This comment has been minimized.

Copy link

@nicolas15000 nicolas15000 commented Sep 20, 2020

Hi guys, if you need to place the "deploy to heroku" button, add this to README.md:

<a href="https://heroku.com/deploy">
  <img  align="right"  src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy">
</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.