Reactjs 下一张JS图像，我无法使用顺风使图像位置居中

嗨，我正在使用NextJS和TailwindCSS进行一个项目。我想将此图像居中，但下一个js似乎忽略了flex，并将中心对齐，如图所示

我希望动态地将位置传递给（例如，开始对齐，结束对齐）。 感谢您的帮助

import NextImage from '@components/image-copy'

function test() {

  return (
    <div className="w-full bg-red-400">
      <NextImage
        src="/images/billboard-corner.webp"
        url={'www.facebook.com'}
        layoutFill={true}
        wrapper="h-60  w-1/2 bg-red-100 relative flex justify-center"
      />
    </div>
  )
}

export default test

import NextImage from'@components/image copy'
功能测试（）{
返回(
)
}
导出默认测试

这是我的图像组件

import Link from 'next/link'
import Image from 'next/image'

const NextImage = ({
  src,
  alt,
  className,
  linkType = 'undef',
  target,
  url,
  draggable,
  width,
  height,
  wrapper,
  position,
  layoutFill,
}) => {

  const style = `${wrapper} relative `

return (
    <>
      {layoutFill ? (
        linkType === 'link' ? (
          <div className={style}>
            <Link href={url}>
              <a>
                <Image src={src} alt={alt} layout="fill" draggable={draggable} className={className} />
              </a>
            </Link>
          </div>
        ) : (
          linkType === 'undef' && (
            <>
              <div className={style}>
                <Image src={src} alt={alt} layout="fill" draggable={draggable} className={className} />
              </div>
            </>
          )
        )
      ) : <div>Example</div>
    }
    </>
  )
}

从“下一个/链接”导入链接
从“下一个/图像”导入图像
const NextImage=({
src，
中高音，
类名，
链接类型='undef'，
目标,，
网址，
拖拉的，
宽度，
高度，
包装纸，
立场,，
布局填充，
}) => {
const style=`${wrapper}相对`
返回(
{布局填充(
链接类型=='链接'(
) : (
链接类型=='undef'&&(
)
)
)：例如
}
)
}

---

导出默认下一个图像

由于您使用的是w-1/2（宽度的50%），因此您的图像应该是正确的

如果不希望其为50%，您可能需要删除

w-1/2

，或者使用

w-full