Image align center in Docusaurus

In this article, I explain how to align image center in your Docusaurus site.

The goal is to align image center in your Docusaurus Markdown file using HTML markup.


You must have Docusaurus project on your machine. See my article about installing and configuring Docusaurus.

If you want to use my Docusaurus example site:

  1. Fork the GitHub project or clone it to your computer:

    git clone
  2. Install npm dependencies:

    npm install
  3. Run the project on your localhost:

    npx docusaurus start

Your Docusaurus site opens in the browser on this localhost: http://localhost:3000/

Store images in the static folder

To add images in your Markdown file with the HTML markup, store these images with the following path:


For more information, see Static assets in the Docusaurus documentation.

Use HTML markup to center image

To align your image center, use the following HTML markup in a Markdown file:

<!-- Paste this code inside your Markdown file -->

<div class="text--center"> 
  <img src="/img/cat.png" /> 


  • <div class="text--center"> </div> is the Docusuarus in-built Infima class.

  • <img src="..." /> is the path to the static folder where you have your img folder with images.

Last modified June 16, 2023: added image align center article (84ce720)