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 -->
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.
Top comments (1)
This does not appear to work in dev.to posts, though. Do you know any way to accomplish image alignment here?