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

Question

我最近开始使用 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 及其内容沿容器的轴定位到屏幕的中心。但是，我没有考虑到徽标右侧的文字较长，因此相对于屏幕中心，徽标会稍微偏离左侧中心。

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

Answer 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 平均分配可用空间。