React.js+TailwindCSS中如何使盒子内图片居中？

你的问题出在Next.js的Image组件默认是块级元素，父元素的text-center类（Tailwind提供）仅对行内/行内块元素生效，所以图片无法和下方文本对齐居中。

只需给每个<Image>标签添加className="mx-auto"（Tailwind的左右自动margin类）即可让图片居中，和文本对齐。

修改后的代码示例：

<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} className="mx-auto" />
    <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} className="mx-auto" />
    <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} className="mx-auto" />
    <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>

另外，也可以给每个包裹内容的flex-1容器替换类名，用flex flex-col items-center替代text-center，这样所有子元素都会自动居中对齐，适合需要统一控制元素布局的场景。

内容的提问来源于stack exchange，提问作者woogabeen