如何在中间对齐图像？(react.js，tailwindCSS)

Question

我正在制作一个简单的组合网页，制作了三个盒子，其中包括一个图片和一些信息。

每个框中的文本在中间对齐，但图像粘在框的左侧。我不知道为什么文字和图像不对齐。

以下是三个框(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>`

下面是它在浏览器上的外观：

​

​

相机、标签和大拇指-向上的图像是那些没有居中的..。

如果有人能告诉我我应该在代码中添加些什么，我会很感激的。

除了默认的reactj之外，我不处理任何其他css或html文件。

谢谢你提前提供帮助。

Answer 1

例如，使用mx-auto：

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

柔性箱方法：

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

Answer 2

您可能会发现这对使用flex和使用顺风中的justify-center类水平对齐项目很有帮助。

​

<div className="flex justify-center text-center shadow-lg p-10 rounded-xl my-10  dark:bg-gray-300 flex-1"> 

​

Answer 3

/*使用此代码*/

    img {
        display: block;
        margin: auto;
    }