如何在Next.js+Tailwind项目中实现图片与h2标签对齐？

核心方案：用Flex布局替代浮动 #

浮动布局易引发重叠、对齐失控等问题，Tailwind的Flex布局能更精准控制元素排列与对齐，具体调整如下：

1. 重构父容器样式：给包含Image和h2的外层div添加flex、items-center、justify-center、gap-{n}（n为自定义间距数值，如gap-3）类，替换原无效布局类；
2. 优化文本对齐逻辑：移除h2的text-center类，避免与Flex容器的整体居中逻辑冲突；
3. 锁定图片尺寸：给Next.js Image添加flex-shrink-0，防止图片因容器空间不足被压缩变形。

修改后的完整代码 #

<div className="pb-3 flex justify-center items-center gap-3">
  <Image
    src={logoNextjs}
    alt="logo nextjs"
    width={100}
    height={100}
    className="flex-shrink-0"
  />
  <div>
    <h2 className="text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
      Sample
    </h2>
  </div>
  <p className="text-center pb-1 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 w-full">
    Demo
  </p>
</div>

关键样式说明 #

• flex：将容器转为弹性布局，让Image、h2容器在同一行排列；
• items-center：让子元素在垂直方向居中对齐，彻底解决重叠问题；
• gap-3：控制图片与文本的间距，实现“紧邻”的视觉效果；
• flex-shrink-0：锁定图片尺寸，避免弹性布局下的压缩变形；
• w-full：让段落标签独占一行，保持原有居中展示的效果。

备选浮动方案（不推荐） #

若坚持使用浮动，需给h2的外层div添加overflow-hidden清除浮动影响，同时给Image设置mr-2（右侧间距）、align-middle（垂直对齐）：

<div className="pb-3 justify-center">
  <Image
    src={logoNextjs}
    alt="logo nextjs"
    width={100}
    height={100}
    className="float-left mr-2 align-middle"
  />
  <div className="overflow-hidden">
    <h2 className="text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl text-center">
      Sample
    </h2>
  </div>
  <p className="text-center pb-1 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 clear-both">
    Demo
  </p>
</div>

注：浮动方案需额外处理清除浮动，布局稳定性远不如Flex，优先推荐前者。

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