[FIXED] how do I align image in center? (react.js, tailwindCSS)

Issue

I was working on a simple portfolio webpage and was making three boxes that includes one image each and some information.

The text in each box are aligned in the center but the image sticks on the left side of the box. I'm not sure why the text and the image are not aligned together.

here is the code of the three boxes (index.js) :

`         <div className="lg:flex gap-10">
            <div className="text-center shadow-lg p-10 rounded-xl my-10  dark:bg-gray-300 flex-1">
              <Image src={design} width={100} height={100} />
              <h3 className="text-lg font-medium pt-8 pb-2  ">
                Tech Stack
              </h3>
              <p className="py-2">
                Tools
              </p>
              <h4 className="py-4 text-teal-600">What I Use</h4>
              <p className="text-gray-800 py-1">HTML 5</p>
              <p className="text-gray-800 py-1">CSS</p>
              <p className="text-gray-800 py-1">Javascript</p>
              <p className="text-teal-500 py-1">etc.</p>
            </div>
            <div className="text-center shadow-lg p-10 rounded-xl my-10 dark:bg-gray-300 flex-1">
              <Image src={code} width={100} height={100} />
              <h3 className="text-lg font-medium pt-8 pb-2  ">
                Tech Stack
              </h3>
              <p className="py-2">
                Tools
              </p>
              <h4 className="py-4 text-teal-600">What I Use</h4>
              <p className="text-gray-800 py-1">HTML 5</p>
              <p className="text-gray-800 py-1">CSS</p>
              <p className="text-gray-800 py-1">Javascript</p>
              <p className="text-teal-500 py-1">etc.</p>
            </div>
            <div className="text-center shadow-lg p-10 rounded-xl my-10 dark:bg-gray-300 flex-1">
              <Image src={consulting} width={100} height={100} />
              <h3 className="text-lg font-medium pt-8 pb-2  ">
                Tech Stack
              </h3>
              <p className="py-2">
                Tools
              </p>
              <h4 className="py-4 text-teal-600">What I Use</h4>
              <p className="text-gray-800 py-1">HTML 5</p>
              <p className="text-gray-800 py-1">CSS</p>
              <p className="text-gray-800 py-1">Javascript</p>
              <p className="text-teal-500 py-1">etc.</p>
            </div>
          </div>`

and here is how it looks on the browser:

The camera, hashtag, and the thumbs-up images are the ones that are not centered..

I would appreciate if anyone could tell me where and what I should add on the code.

I'm not working on any other css or html file except for the default reactjs.

Thank you for any help in advance.

Solution

use mx-auto for example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />

<section class="hero container max-w-screen-lg mx-auto pb-10">
    <img class="mx-auto" src="//image" alt="screenshot" >
</section>

flexbox approach:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />

<section class="hero container max-w-screen-lg mx-auto pb-10 flex justify-center">
    <img  src="//image" alt="screenshot" >
</section>

Answered By - Shoaib Amin

Answer Checked By - Pedro (PHPFixing Volunteer)