githubasciidoc

Center align image in README.adoc (AsciiDoc) on GitHub


I want to center align an image in a README.adoc file in GitHub.

I know that for Markdown files, adding HTML like the following works:

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

However, I want to write the file in AsciiDoc, not Markdown.

What I have tried but has not worked

Suppose there is a map.png image in the same dir as the README.

image::map.png[A map, 350, align=center]

This displays the correct image, but aligned to the left.


Solution

  • GitHub is using Asciidoctor but strips away CSS classes and inline CSS styles. As a workaround you can use a passthrough (which is not ideal):

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

    You can also comment/vote for this issue: https://github.com/github/markup/issues/984

    I recommend using a conditional block to use this passthrough only when the README is rendered on GitHub:

    ifdef::env-github[]
    ++++
    <p align="center">
      <img width="460" height="300" src="http://www.fillmurray.com/460/300">
    </p>
    ++++
    endif::[]
    
    ifndef::env-github[]
    image::map.png[A map, 350, align=center]
    endif::[]