Tailwind CSS移动端导航栏菜单样式调整求助

要实现菜单整体居中且内部文本也居中的效果，只需在现有样式基础上补充文本居中的规则即可，具体操作如下：

• 保留外层容器的 flex justify-center items-center 类，确保整个菜单组在父容器中水平垂直居中，建议给外层容器再加 w-full，让导航栏占满移动端屏幕宽度；
• 给每个导航按钮（或链接）添加 text-center 类，强制让按钮内部的文本居中对齐；
• 若需要给菜单项之间添加间距，可在外层容器加上 space-x-[间距值]（比如 space-x-6）来控制间距。

示例代码：

<!-- 外层导航容器 -->
<div className="w-full flex justify-center items-center space-x-6">
  <!-- 每个菜单项添加 text-center -->
  <button className="text-center">首页</button>
  <button className="text-center">分类</button>
  <button className="text-center">我的</button>
</div>

如果你的菜单项有固定宽度需求，还可以给按钮加上固定宽度类（比如 w-20），配合 text-center 能让文本在固定宽度内更规整地居中：

<button className="w-20 text-center">我的订单</button>

原理说明：
flex justify-center items-center 仅负责让flex容器的子元素（即菜单项）在容器内居中排列，但子元素内部的文本默认是左对齐状态，因此必须给子元素单独添加 text-center 来实现文本自身的居中。

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