Image align center in Docusaurus

Prerequisites

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 https://github.com/ivancheban/my-site.git
   

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:

static/img/your-image.png

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>

Where:

• <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.