Menu
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.
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.
785
So, that means to center or align images in GitHub readmes, your only solution is to use the deprecated HTML align attribute (that happens to still function), as this answer shows.
Open the asciidoctor-default. css and find the place where for imageblock the text-align attribute is set to left and change that to center . For me, this was in line 177. Rebuild your ASCIIDoctor document and the rendered HTML should have centered image caption.
Solution 2 : use the "align" deprecated attribute This is not recommended, but in some cases this is the only way to center the image. Insert this HTML snippet into your markdown file. You can also try to put the "align" attribute directly into the "img" tag.
You can just remove img {display: block;} , by default it is inline level, they will get centered with text-align: center; set on the container, which you already did.
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::[]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
