In this post, we will see how to center align an image in markdown.

Markdown is an awesome markup language to write content to take notes or for a blog post.

It is highly used nowadays because it can be easily converted to HTML to create web page content.

However, markdown does not allow you to tweak the alignment of text or images directly.

So how can we align elements in markdown format?

Well, even though there is no native support for alignment properties in markdown, we can use the HTML tags to overcome this issue.

Let's see with an example.

Center align an image in markdown

The native way to insert an image in a markdown document is like this

![image alt text](https://picsum.photos/id/247/300/300)

The output of this will be

insert image in markdown image

Now, to center align this image in the center of our document we cannot rely on markdown syntax.

But since markdown does support plain HTML which means we can use HTML attributes and tags with markdown to achieve some style with the content.

So to center an image in markdown we can use the align attribute with the <img> tag.

We can also wrap the image inside an <div> or an <p> tag. And then apply the align attribute.

For example:

<div align="center">
    <img src="https://picsum.photos/id/247/300/300">
</div>

Output:

center an image in markdown

For right align image in markdown

To align the image to right we can use the align="right" attribute.

<img align="right" src="https://picsum.photos/id/247/300/300">

Output will be

align an image to the right markdown

So, these are the simple ways that we can be used to align an image or text to the center of the markdown document.

Note: It is important to note that sometimes, the document may not center the images with the above-mentioned ways. This is because HTML tags only work properly in a browser.


FAQ

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

Answer: To center an image in the README.md file , we can wrap the image inside an <p> or <div> tag and use align="center" attribute.

<div align="center">
    <img src="/image.png">
</div>

💾 Recommended Articles