如何用Tailwind实现Logo左对齐、导航菜单居中布局？

你遇到的核心问题是justify-between需要三个元素才能让中间内容居中，且原代码里的absolute类会破坏正常文档流，导致布局混乱。以下是两种可行的修复方案：

方案一：利用三元素justify-between布局 #

保留左侧Logo、中间菜单、右侧占位元素，通过justify-between让左侧和右侧分别对齐两端，中间菜单自然居中：

<main>
  <title>My Name - Software Engineer</title>

  <nav className="bg-black">
    <div className="max-w-6xl mx-auto border border-red-400">
      <div className="flex justify-between items-center">
        {/* 左侧：姓名/Logo */}
        <div>
          <a href="#" className="flex items-center py-5 px-3 text-white">
            <span>My Name . _</span>
          </a>
        </div>

        {/* 中间：导航菜单 */}
        <div className="flex items-center space-x-6">
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Home</a>
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Expertise</a>
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Work</a>
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Experience</a>
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Contact</a>
        </div>

        {/* 右侧：占位元素（后续可添加社交图标等内容） */}
        <div></div>
      </div>
    </div>
  </nav>
</main>

修改说明： #

• 给父容器添加items-center，确保所有元素垂直居中，避免上下对齐错位
• 移除菜单容器的absolute和多余的justify-between类，让元素回到正常文档流
• 调整文字颜色：将无效的text-white-700改为text-white，菜单文字用text-gray-300适配深色背景，添加hover:text-white提升交互感
• 右侧空div作为占位，让justify-between生效，实现左-中-右的布局结构

方案二：用mx-auto直接让菜单居中 #

如果不需要右侧占位元素，直接给菜单容器添加mx-auto，它会自动占据剩余空间并居中：

<main>
  <title>My Name - Software Engineer</title>

  <nav className="bg-black">
    <div className="max-w-6xl mx-auto border border-red-400">
      <div className="flex items-center">
        {/* 左侧：姓名/Logo */}
        <div>
          <a href="#" className="flex items-center py-5 px-3 text-white">
            <span>My Name . _</span>
          </a>
        </div>

        {/* 中间：导航菜单 */}
        <div className="flex items-center space-x-6 mx-auto">
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Home</a>
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Expertise</a>
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Work</a>
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Experience</a>
          <a href="#" className="py-5 px-3 text-gray-300 hover:text-white">Contact</a>
        </div>
      </div>
    </div>
  </nav>
</main>

修改说明： #

• 父容器仅保留flex items-center保证垂直对齐
• 菜单容器添加mx-auto，自动分配左右margin实现居中，无需右侧占位元素

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