GitHub README.md center image

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 repo. 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:

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

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>

I've been looking at the markdown syntax used in github [...], I can't figure out how to center an image

TL;DR

No you can't by only relying on Markdown syntax. Markdown doesn't care with positioning.

Note: Some markdown processors support inclusion of HTML (as rightfully pointed out by @waldyr.ar), and in the GitHub case you may fallback to something like <div style="text-align:center"><img src="..." /></div>. Beware that there's no guarantee the image will be centered if your repository is forked in a different hosting environment (Codeplex, BitBucket, ...) or if the document isn't read through a browser (Sublime Text Markdown preview, MarkdownPad, VisualStudio Web Essentials Markdown preview, ...).

Note 2: Keep in mind that even within the GitHub website, the way markdown is rendered is not uniform. The wiki, for instance, won't allow such css positional trickery.

Unabridged version

The Markdown syntax doesn't provide one with the ability to control the position of an image.

In fact, it would be borderline against the Markdown philosophy to allow such formatting, as stated in the "Philosophy" section

"A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. "

Markdown files are rendered by github.com website through the use of the Ruby Redcarpet library.

Redcarpet exposes some extensions (such as strikethrough, for instance) which are not part of standard Markdown syntax and provide additional "features". However, no supported extension allow you to center an image.


Alternatively, if you have control of the css, you could get clever with url parameters and css.

Markdown:

![A cute kitten](http://placekitten.com/200/300?style=centerme)

And CSS:

img[src$="centerme"] {
  display:block;
  margin: 0 auto;
}

You could create a variety of styling options this way and still keep the markdown clean of extra code. Of course you have no control over what happens if someone else uses the markdown somewhere else but thats a general styling issue with all markdown documents one shares.