如何在Tailwind CSS中居中SVG图片？

你遇到的核心问题是没有给图片容器设置正确的布局类，以下几种方法都能快速解决：

方法1：用Flex布局居中 #

给包裹图片的<p>标签同时加上flex和justify-center类——justify-center只有在flex容器中才会生效，单独添加无法起作用：

<Container>
  <div className="mx-auto max-w-2xl md:text-center">
    <p className="flex justify-center">
      <Image src={company.logo} alt={company.name} unoptimized />
    </p>
    <p className="mt-4 text-lg tracking-tight text-slate-700">
        {company.name}   
    </p>
  </div>
</Container>

方法2：用文本居中类 #

如果你的SVG属于行内/inline-block元素，直接给包裹它的<p>标签添加text-center类，就能和公司名称一样实现居中：

<Container>
  <div className="mx-auto max-w-2xl md:text-center">
    <p className="text-center">
      <Image src={company.logo} alt={company.name} unoptimized />
    </p>
    <p className="mt-4 text-lg tracking-tight text-slate-700">
        {company.name}   
    </p>
  </div>
</Container>

方法3：直接给图片加margin类 #

给Image组件添加block mx-auto类，强制将图片转为块级元素，再通过左右自动margin实现居中：

<Container>
  <div className="mx-auto max-w-2xl md:text-center">
    <p>
      <Image src={company.logo} alt={company.name} unoptimized className="block mx-auto" />
    </p>
    <p className="mt-4 text-lg tracking-tight text-slate-700">
        {company.name}   
    </p>
  </div>
</Container>

以上三种方法任选其一即可解决问题，可根据你的整体布局需求选择最适配的方案。

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