markdown - How do I center an image in the README.md file on GitHub?

Question

I've been looking at the Markdown syntax used in GitHub for a while, but except resizing an image to the width of the README.md page, I can't figure out how to center an image in it.

Is this possible? If so, how can I do it?

Answer 1

This is from GitHub's support:

Hey Waldyr,

Markdown doesn't allow you to tweak alignment directly (see docs here: http://daringfireball.net/projects/markdown/syntax#img), but you can just use a raw HTML 'img' tag and do the alignment with inline css.

Cheers,

So it is possible to align images! You just have to use inline CSS to solve the problem. You can take an example from my GitHub repository. At the bottom of README.md there is a centered aligned image. For simplicity you can just do as follows:

<p align="center">
  <img src="http://some_place.com/image.png" />
</p>

Although, as nulltoken said, it would be borderline against the Markdown philosophy!

---

This code from my README file:

<p align="center">
  <img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>

It produces this image output, except centered when viewed on GitHub:

<p align="center">
  <img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>