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 commented Aug 3, 2017

Bill is the boss man! Love it!

@sadan

This comment has been minimized.

Copy link

sadan commented Sep 7, 2017

thank you +1

@LauraRichter

This comment has been minimized.

Copy link

LauraRichter commented Oct 8, 2017

Thank you!

@alan86alves

This comment has been minimized.

Copy link

alan86alves commented Nov 22, 2017

Thank you!

@CobySoffer

This comment has been minimized.

Copy link

CobySoffer commented Nov 25, 2017

Thank you!

@nishitpatel01

This comment has been minimized.

Copy link

nishitpatel01 commented Dec 20, 2017

Thanks!

@ghost

This comment has been minimized.

Copy link

ghost commented Dec 26, 2017

Long live Bill Murray!

Thanks!

@arretx

This comment has been minimized.

Copy link

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 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 commented Apr 12, 2018

Awesome! Thanks

@ndk1996

This comment has been minimized.

Copy link

ndk1996 commented Apr 23, 2018

thks boss

@gabrielbazan

This comment has been minimized.

Copy link

gabrielbazan commented Apr 27, 2018

Thanks!

@MuhammedBuyukkinaci

This comment has been minimized.

Copy link

MuhammedBuyukkinaci commented Jun 9, 2018

Thank you.

@imanghafoori1

This comment has been minimized.

Copy link

imanghafoori1 commented Jun 11, 2018

Nice

@JINSOO-PHILIP-KIM

This comment has been minimized.

Copy link

JINSOO-PHILIP-KIM commented Jun 22, 2018

Sweet!

@zxuqian

This comment has been minimized.

Copy link

zxuqian commented Jul 1, 2018

It works! Thank you!

@Draketheb4dass

This comment has been minimized.

Copy link

Draketheb4dass commented Jul 25, 2018

Thanks man

@nikmuhammadnaim

This comment has been minimized.

Copy link

nikmuhammadnaim commented Jul 26, 2018

Nice guide

@endymioncheung

This comment has been minimized.

Copy link

endymioncheung commented Aug 19, 2018

Brilliant, thank you!

@CarlosBalladares

This comment has been minimized.

Copy link

CarlosBalladares commented Sep 11, 2018

Thank you!

@u112358

This comment has been minimized.

Copy link

u112358 commented Sep 17, 2018

Thanks. It helps!

@ivanlmj

This comment has been minimized.

Copy link

ivanlmj commented Sep 27, 2018

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

@ankur715

This comment has been minimized.

Copy link

ankur715 commented Sep 30, 2018

@emirhangl

This comment has been minimized.

Copy link

emirhangl commented Nov 15, 2018

Thanks a lot man! <3

@intika

This comment has been minimized.

Copy link

intika commented Nov 23, 2018

Thanks !

@Xunnamius

This comment has been minimized.

Copy link

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 commented Dec 12, 2018

Elegant! Tack!

@blacknwhite5

This comment has been minimized.

Copy link

blacknwhite5 commented Jan 4, 2019

Thanks!

@harshkakashaniya

This comment has been minimized.

Copy link

harshkakashaniya commented Jan 5, 2019

Thank you very much.

@mantou132

This comment has been minimized.

Copy link

mantou132 commented Jan 12, 2019

Thanks!

@navin-navi

This comment has been minimized.

Copy link

navin-navi commented Feb 15, 2019

Thank you so much

@StygianTheBest

This comment has been minimized.

Copy link

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

@mousavikahaki

This comment has been minimized.

Copy link

mousavikahaki commented May 7, 2019

close the img tag so it does not affect the rest of the file.

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

This comment has been minimized.

Copy link

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 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 commented Jul 6, 2019

thanks

@wilsson

This comment has been minimized.

Copy link

wilsson commented Jul 16, 2019

thanks

@blackcat1383

This comment has been minimized.

Copy link

blackcat1383 commented Jul 26, 2019

thank you! <3

@Navneet-Sahota

This comment has been minimized.

Copy link

Navneet-Sahota commented Aug 18, 2019

Thanks

@pioz

This comment has been minimized.

Copy link

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 commented Sep 6, 2019

@lzurutuza

This comment has been minimized.

Copy link

lzurutuza commented Sep 13, 2019

thanks!

@drscotthawley

This comment has been minimized.

Copy link

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 commented Oct 6, 2019

Gracias !!

@simonprovost

This comment has been minimized.

Copy link

simonprovost commented Oct 20, 2019

+1

@MythraUwU

This comment has been minimized.

Copy link

MythraUwU commented Oct 26, 2019

ty uwu

@salabson

This comment has been minimized.

Copy link

salabson commented Oct 29, 2019

Thank you

@Reelix

This comment has been minimized.

Copy link

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 commented Dec 30, 2019

Thank you so much!

@FedericoTartarini

This comment has been minimized.

Copy link

FedericoTartarini commented Dec 31, 2019

Thanks

@alshdavid

This comment has been minimized.

Copy link

alshdavid commented Jan 2, 2020

How do you add a link to it?

@mayraamaral

This comment has been minimized.

Copy link

mayraamaral commented Jan 3, 2020

Thank you so much! It worked.

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.