如何在尾风CSS中水平居中导航条内容

Question

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

screen

• Navigation
• Logo，它应该位于徽标

两侧的水平中心上。

以下是我的尝试的简化版本：

    <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>

我最初的方法是有一个包含三个div的柔性盒容器(nav)，每个导航栏的每个部分都有一个，然后使用说明中心类(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项flex-1允许每个项目在忽略初始大小的同时增长(或缩小)。这在项目之间平均分配空间。使每个项目成为一个中心对齐项，并分别使用mr-auto和ml-auto来平均分配空闲空间。