React+Tailwind导航栏中间文本无法居中问题求助

你遇到的问题是因为justify-between会让元素按容器内剩余空间均匀分布，但Logo的宽度（75px）远大于汉堡图标的宽度，导致中间文本的实际位置是Logo右侧到图标左侧的中点，视觉上就偏右了。以下是几种可行的解决方法：

方案一：使用Grid布局（推荐） #

通过Grid将容器分成三等分，让每个元素占据相同宽度，中间文本自然居中：

<div className="grid grid-cols-3 items-center">
  <div>
    <img src={logo} alt="logo" width={75} />
  </div>
  <div className="text-center">Middle Text</div>
  <div className="flex justify-end">
    <RxHamburgerMenu size={25} />
  </div>
</div>

• grid-cols-3 将容器横向分成3个等宽列
• 中间元素添加text-center，确保文本在自身列内居中
• 右侧元素用flex justify-end让汉堡图标靠右侧对齐，保持视觉平衡

方案二：统一左右容器宽度 #

保持Flex布局，给左右两个容器设置相同宽度，让justify-between能让中间文本居中：

<div className="flex justify-between">
  <div className="w-[75px]">
    <img src={logo} alt="logo" width={75} />
  </div>
  <div className="my-auto">Middle Text</div>
  <div className="my-auto w-[75px] flex justify-end">
    <RxHamburgerMenu size={25} />
  </div>
</div>

• 给左右容器都设置w-[75px]，和Logo宽度一致
• 右侧容器添加flex justify-end，让汉堡图标靠右，避免空宽度影响视觉

方案三：绝对定位中间文本 #

通过绝对定位强制让文本居中，不受左右元素宽度影响：

<div className="flex justify-between relative">
  <div>
    <img src={logo} alt="logo" width={75} />
  </div>
  <div className="absolute left-1/2 -translate-x-1/2 my-auto">Middle Text</div>
  <div className="my-auto">
    <RxHamburgerMenu size={25} />
  </div>
</div>

• 外层容器添加relative作为定位参考
• 中间文本用absolute left-1/2 -translate-x-1/2实现水平居中，确保始终在容器正中间

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