如何用Tailwind CSS在MapBoxGL弹窗中居中Next.js <Image />组件？

直接上修改后的代码，再逐个拆解问题：

const popupContent = (
  <div className="w-full max-w-[300px] flex flex-col space-y-4">
    {/* 文字区域：左对齐 */}
    <div className="flex flex-col items-start">
      <Link
        href={`/listings/${listing.id}`}
        className="text-blue-500 hover:underline focus:outline-none"
      >
        <h3>{listing.title}</h3>
      </Link>
      <p>{listing.activity_type}</p>
      <p>{listing.mount_type}</p>
    </div>
    {/* 图片区域：居中显示 */}
    <div className="flex justify-center">
      <Image
        src={listing.primary_image_url}
        alt="Listing"
        width={300}
        height={600}
        className="object-cover"
      />
    </div>
  </div>
);

问题修复细节 #

1. 文字左对齐 #

你给文字容器加的items-start本身是正确的，之前可能因为父容器的h-full导致布局异常，去掉后就能正常左对齐。

2. Next.js Image 居中显示 #

• 图片外层用flex justify-center直接实现水平居中，比嵌套relative容器更简洁。
• 注意JSX属性名必须是小驼峰：你之前写的object-Fit是错误的，要改成objectFit（或者直接写在className里用object-cover），否则属性不会生效。
• 去掉不必要的relative和w-3/4，当给Image指定固定width/height时，不需要父容器是relative（仅fill模式需要）。

3. 弹窗宽度过大 #

• 最外层容器加max-w-[300px]，限制弹窗最大宽度和图片一致，避免被内容无限撑开。
• MapBoxGL弹窗默认有最小宽度，需要额外加CSS覆盖：

  .mapboxgl-popup-content {
    padding: 1rem;
    max-width: 300px !important;
  }
  

• 去掉最外层的h-full，让弹窗高度由内容自动撑开，避免不必要的拉伸。

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