为何使用w-fit后导航栏左对齐？导航栏居中适配求助

要同时实现导航栏居中、背景贴合内容、内部元素垂直居中，你可以这样调整代码：

<div className="app">
  {/* 外层div加mx-auto实现水平居中，配合w-fit让容器贴合nav宽度 */}
  <div className='w-fit mx-auto'>
    {/* 去掉固定h-24，让内容决定高度更贴合；保留flex-col+justify/items-center实现内部垂直+水平居中 */}
    <nav className="main-nav flex flex-col justify-center items-center bg-[#0D0D0D] p-6 rounded-full">
      <Link to="/">
        <h1 className='text-3xl font-display text-[#F2F2F2] p-4'>text-logo</h1>
      </Link>
      {/* 给注销按钮加样式，统一颜色和间距 */}
      {this.state.user &&
        <a href='#!' onClick={this.logOutUser} className='text-[#F2F2F2] py-2'>Log out</a>
      }
    </nav>
  </div>
</div>

关键调整说明： #

• 外层div添加mx-auto：w-fit让容器宽度贴合导航栏内容，但默认左对齐，mx-auto会自动分配左右margin，实现整体水平居中。
• 移除nav的h-24：固定高度可能和内边距、内容高度冲突，导致背景无法贴合；去掉后由内边距和内部元素高度决定导航栏高度，更贴合内容。
• 调整内边距：把nav的p-12和h1的p-12改小（比如p-6和p-4），避免过大内边距让导航栏过于宽大，同时保证元素间距合理。
• 给注销按钮加样式：添加text-[#F2F2F2]让文字和logo颜色统一，py-2增加垂直间距，让垂直排列更美观。

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