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
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 <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:
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.
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>Related Articles:
How to write superscript and subscript in markdown
How to do text highlight in markdown
How to change image size in markdown in GitHub
Checkbox inside GitHub Markdown Table
