How to align images in markdown

#markdown #github

Originally posted on davidwells.io

Markdown is awesome. It's a fantastic way to write content quickly without the overhead of formatting with a WYSIWYG editor. If you are unfamiliar with .md files checkout the basics here & here.

Writing text in markdown is super quick and easy, but what about aligning images?

Read on to learn how! The full code can be found in this github gist

Image alignment in markdown

Normal markdown image tags don't allow for any alignment properties and thats a bummer when you are trying to make your README.md file pretty on github.

<!-- No alignment options -->
![GitHub Logo](/images/logo.png)

Luckily, we can use html image tags to make enhance our docs.

<!-- Alignment options!!!!! -->
<img align="left" width="100" height="100" src="http://www.fillmurray.com/100/100">

Left alignment

This is the code you need to align images to the left:

<img align="left" width="100" height="100" src="http://www.fillmurray.com/100/100">

Right alignment

This is the code you need to align images to the right:

<img align="right" width="100" height="100" src="http://www.fillmurray.com/100/100">

Center alignment example

Wrap images in a p or div to center.

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

Markdown Formatting on steroids

If you like this, you might enjoy markdown-magic. I built it to automatically format markdown files and allow folks to sync docs/code/data from external sources.