5

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.

HerCerM
  • 145
  • 2
  • 9
  • Same here, the `align="center"`is ignored (doesn't exist) in the HTML code rendered by GitHub. This is probably a GitHub bug. Nothing todo with center. In your image attributes above. I wonder if you missed a numerical info for width and height. Should it be `[A map, 350, 350, align="center"]` – Polymerase Jun 23 '20 at 03:32
  • @Polymerase I also tried setting the height positional attribute, but GitHub renders it to the exact dimensions set, rather than preserving the aspect ratio as it would look when converted to a PDF or HTML with the `asciidoctor` CLI. Omitting the height attribute sizes the image to the desired width and preserves the aspect ratio in GitHub – HerCerM Jun 23 '20 at 18:11

1 Answers1

5

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::[]
Mogztter
  • 421
  • 3
  • 3