How to Align Images Left, Right, or Center in Markdown

Let’s see how we can center-align, left-align, and right-align our images in Markdown.

The thing to note is that Markdown can actually render raw HTML.

This means that we can use properties provided by HTML elements to align images.

Center Align

For center alignment, we can wrap the img with a p tag with align="center".

<p align="center">
  <img 
    width="300"
    height="300"
    src="https://picsum.photos/300/300"
  >
</p>

Left Align

For left alignment, we can simply use align="left" on the img tag.

<img 
  align="left"
  width="100"
  height="100"
  src="https://picsum.photos/100/100"
>

Right Align

Similarly, for right alignment, we can use align="right" on the img tag.

<img
  align="right"
  width="100"
  height="100"
  src="https://picsum.photos/100/100"
>