How to Center Image in Markdown

Abdul Jabbar Feb 02, 2024
  1. Align Images in Markdown
  2. How to Center Alignment in Markdown
How to Center Image 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>
Author: Abdul Jabbar
Abdul Jabbar avatar Abdul Jabbar avatar

Abdul is a software engineer with an architect background and a passion for full-stack web development with eight years of professional experience in analysis, design, development, implementation, performance tuning, and implementation of business applications.

LinkedIn