How to center align an image in markdown
📋 Table Of Content
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
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
We can also wrap the image inside an
<div> or an
<p> tag. And then apply the align attribute.
<div align="center"> <img src="https://picsum.photos/id/247/300/300"> </div>
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
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.
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
<div> tag and use
<div align="center"> <img src="/image.png"> </div>