如何在 Tailwind CSS 中水平居中导航栏内容

Posted 2023-03-06

【中文标题】如何在 Tailwind CSS 中水平居中导航栏内容

【英文标题】：How to horizontally center navbar content in Tailwind CSS

【发布时间】：2021-09-22 19:53:17

【问题描述】：

我最近开始使用 Tailwind，我决定第一个组件将是一个具有以下特性的基本导航栏。

应该位于屏幕水平中心的徽标 徽标两侧的导航链接

这是我尝试的简化版本：

    <nav class=" flex fixed w-screen justify-center items-center text-center">
      <!-- Left Navigation -->
      <div>
        <a class="mx-2">LINK ONE</a>
        <a class="mx-2">LINK TWO</a>
      </div>
      <!-- Logo -->
      <div class="mx-12">L</div>
      <!-- Right Navigation -->
      <div>
        <a class="mx-2">LINK THREEE</a>
        <a class="mx-2">LINK FOOOUR</a>
      </div>
    </nav>

我最初的方法是使用一个 flexbox 容器 (nav) 来容纳三个 div，一个用于导航栏的每个部分，然后使用 justify-center 类 (justify-content: center;) 将徽标直接定位在屏幕中心，左右导航链接位于两侧。

一旦我尝试了这个，我很快发现justify-center 类帮助我将所有的 div 及其内容沿容器的轴定位到屏幕的中心。但是，我没有考虑到徽标右侧的文字较长，因此相对于屏幕中心，徽标会稍微偏离左侧中心。

所以，我的问题是，我如何才能将徽标水平居中 - 死中心 - 在屏幕上而不让左右导航链接将徽标推离中心？

【参考方案1】：

您可以通过以下方式实现它：

<nav class="flex fixed w-screen">
    <!-- Left Navigation -->
    <div class="flex-1 flex justify-center mr-auto">
        <a class="mx-2">LINK ONE</a>
        <a class="mx-2">LINK TWO</a>
    </div>
    <!-- Logo -->
    <div class="mx-12">L</div>
    <!-- Right Navigation -->
    <div class="flex-1 flex justify-center ml-auto">
        <a class="mx-2">LINK THREEE</a>
        <a class="mx-2">LINK FOOOUR</a>
    </div>
</nav>

给每个弹性项目flex-1 允许每个项目在忽略其初始大小的同时增长（或缩小）。这会在项目之间平均分配空间。使每个项目成为中心对齐项目，并分别使用mr-auto 和ml-auto 平均分配可用空间。

【讨论】：

感谢您的回答。您能否详细说明它的工作原理和原因，以供将来参考？

感谢您的解释。我有一个后续问题。我试图用类限制导航栏本身的大小：max-w-xl & 它使整个导航栏浮动到左侧。知道为什么吗？

所以你想限制宽度并让导航栏保持居中？

我相信这是 OP 正在谈论的问题：play.tailwindcss.com/6jw9SuW7Dq 这是由于使用了fixedclass。您可以限制导航栏中元素的最大宽度，方法是将内容包装在另一个 div 中并限制其大小，如下所示：play.tailwindcss.com/VzVv3uFke8

@ptts 是正确的。这就是我遇到的问题。我设法修复它，就像 ptts 提供解决方案一样。谢谢你们俩。 :)