如何将图片居中显示在屏幕，同时让汉堡菜单与搜索框居导航栏左侧？

要实现汉堡菜单（SideNav）和搜索框居左、Logo居中的导航栏布局，需要调整Flex容器的宽度和布局结构，以下是修改后的代码：

修改 site-header.tsx #

将导航容器的宽度从 w-max 改为 w-full，确保容器占满整个屏幕宽度，让元素能在横向空间内正确分布：

<header className="sticky top-0 z-40 border-b bg-black bg-opacity-40">
  <div className="flex h-16 w-full items-center">
    <MainNav />
  </div>
</header>

修改 main-nav.tsx #

重构布局结构，用绝对定位让Logo始终居中，同时固定左侧菜单区域：

export function MainNav() {
  return (
    <div className="flex w-full items-center">
      {/* 左侧菜单区域 */}
      <div className="flex ml-4">
        <SideNav />
        <Search href="/" className="cursor-pointer" />
      </div>
      {/* 居中Logo区域，不受左侧菜单宽度影响 */}
      <div className="absolute left-1/2 transform -translate-x-1/2">
        <Image
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Fast_Company_logo.svg/120px-Fast_Company_logo.svg.png?20180515163340"
          alt="Logo"
          width={120}
          height={28}
        />
      </div>
    </div>
  )
}

关键修改说明 #

1. w-full 替换 w-max：原 w-max 会让容器宽度仅包裹内容，无法横向占满屏幕，导致元素无法分散布局；w-full 确保容器占满整个视口宽度。
2. 绝对定位实现Logo居中：通过 left-1/2 和 -translate-x-1/2 组合，让Logo相对于父容器水平居中，不受左侧菜单宽度变化的影响，是最稳定的居中方案。
3. 左侧菜单边距：给左侧菜单容器添加 ml-4，避免菜单紧贴屏幕边缘，提升视觉体验。

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