How to Center Image in Markdown

1. Align Images in Markdown
2. How to Center Alignment in Markdown

Markdown is popularly known as a lightweight markup language that includes formatting elements to plain text documents with the help of a text editor application. It was established by John Gruber in 2004.

This language has now become the world’s most demanded markup language. We can now find many web-based applications that are particularly used for writing in Markdown.

Markdown is slightly different than a WYSIWYG editor. As seen in Microsoft Word for formatting words and phrases, we click buttons to see the changes immediately.

But Markdown doesn’t follow this. In Markdown, when we develop a Markdown-formatted file, Markdown syntax specifies some words and phrases that should be different in the text.

This article will discuss how to center an image in our markdown file. For instance, the README.md file at the root of an open-source project is displayed on the browser as HTML.

Align Images in Markdown

Markdown has a very simple way to write content without using the overhead of formatting with a WYSIWYG editor.

Writing text in Markdown is quick, but what about aligning images?

Markdown image tags themselves don’t have any alignment properties, which is very annoying when we format our README.md file on Github.

<!-- No alignment options -->
(/myimages/mylogo.png)

Fortunately, there is a way out for this problem. We will use html image tags to enhance our docs using the img tag in HTML.

.md is the markdown extension which tells us that the README.md is a markdown file. This file is used to create the html summary that we see at the end of our projects.

<img align="right" width="120" height="120" src="https://www.pexels.com/photo/photo-of-grey-tabby-kitten-lying-down-2558605/">

How to Center Alignment in Markdown

Center aligning in markdown is a little bit tricky. As shown below, we have to wrap the img tag within a p tag.

<p align="center">
  <img width="460" height="300" src="https://www.pexels.com/photo/photo-of-grey-tabby-kitten-lying-down-2558605/">
</p>