80

I have a narrow long image that I want to display at the top right of a README.md file on GitHub. I have been trying several things to get it aligned right and currently have

<p align="right">
  <img src="doc/subpagelist.png" />
</p>

This works in that the image is aligned on the right side, though is rather useless as all content that is below in image in the Markdown file gets displayed under the bottom of the image, rather then to the left of it.

Is there a way to have the text flow around the image (without getting rid of headers and paragraphs)?

5 Answers 5

127

The align="right" (or left) attribute works in GitHub Markdown:

<img align="right" src="doc/subpagelist.png">
9
  • 4
    Doesn't work with headers though. How do I align an image next to a header? Jan 14, 2017 at 17:51
  • Excellent ! Many thanks, I've been looking a lot for this... Works also on Gitlab :) Mar 1, 2017 at 10:00
  • 3
    @theonlygusti To put an image next to a headline, put the right-aligned image before the headline, with a blank line in between.
    – Jo Liss
    May 23, 2017 at 1:19
  • 6
    Is there anyway to clear: both after the image? The image I'm using is fairly tall and it's bleeding into the next H1 section. Mar 10, 2019 at 23:39
  • 12
    @JoshuaPinter you need to use e.g. <br clear="right"/>. Using style="clear: both" doesn't work for the same reason style="float: right" doesn't: the style attributes are stripped out.
    – waldyrious
    Apr 12, 2019 at 13:09
12

align="left" works fine. To break the alignment again, use a <br clear="left"/> (or <br clear="right"/>) tag:

<img src="/path/to/image.png" align="left" width="200px"/>
some text floating around the image

<br clear="left"/>

A "newline". This text doesn't float anymore, is left-aligned.
1
  • Also, if you want a clean margin just add style="margin:16px;"
    – neoscribe
    Sep 2, 2022 at 23:40
8

It works for me (only for jekyll, it does not work for Github markdown): Put the code below in your content markdown (I have put it on the first line for better organization)


    <style type="text/css">
    .image-left {
      display: block;
      margin-left: auto;
      margin-right: auto;
      float: right;
    }
    </style>

And refers to your image as follows: [![Proguard](./proguard-snippets.png)](http://www.thiengo.com.br/proguard-android){: .image-left } Your Text comes here...

Note the .image-left class besides the image url.

The final results are here: Movies of the Year jekyll github page

2
  • Should the CSS line be ' float: left;' instead of 'float: right;' for shifting to the left?
    – MethodMan
    Mar 24, 2020 at 3:50
  • About: "only for jekyll, it does not work for Github markdown"? Explanation: set up GitPages and look at <user>.github.io/<name>.io, not github.com/<user>/<name>.io
    – Erwann
    Feb 26, 2022 at 17:16
6

In markdown you can add extra attributes to tags. For instance I use this for what you intend to do:

![Some Title](http://placehold.it/image.jpeg){:style="float: right;margin-right: 7px;margin-top: 7px;"}
2
  • 17
    This doesn't seem to work with github flavored markdown.
    – kdbanman
    Apr 22, 2016 at 15:32
  • nor does this work in my Azure DevOps private Git repository (which, of course, may very well be github.com under the covers now)
    – bkwdesign
    Jun 7, 2019 at 18:56
-1

What you are describing is "floating" of an image, which allows text to flow around it. There are a number of good turtorials about floating in CSS if you want to learn more about this topic. In the mean time, to get an image to float in Markdown you can wrap the image in a div and float that div using:

<div style="float: right">
    ![Replace this with your image](http://placehold.it/85x85 "Title")
</div>
2
  • 3
    The div remains, but Github strips out any included style information. Jan 17, 2014 at 0:56
  • I've not tried it in GitHub, but that works like a charm in Azure DevOps Markdown.
    – Kingsley
    Aug 3, 2021 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.