header顺风对齐

Question

我在 header 中有一个徽标和 back-to-home 按钮。徽标必须位于 header 的中间，按钮必须位于 header 的中间。当我尝试 justify-between 时，徽标位于开头。哪个tailwind class/classes 可以给我解决方案？

<div class="flex justify-between mt-10">
            <x-app-logo mode="" classes="pb-8 w-60 justify-self-center"></x-app-logo>
            <a href="{{url('/')}}" class="text-green-500 text-lg underline mr-10 font-bold ">Back to home</a>
/div>

Answer 1

您可以在徽标前创建一个空元素以容纳左侧的 space。然后对第一个和最后一个元素应用相同的宽度。这样 justify-between 将使徽标保持在中央。这是在 Tailwind Play https://play.tailwindcss.com/1Lp9GvNz3O

<div class="flex justify-between items-center p-4">
  <!-- Keeps the space equal on this side -->
  <div class="w-32"></div>
  <!-- Your logo here -->
  <div class="flex justify-center rounded-full h-8 w-8 bg-yellow-500"></div>
  <a href="/" class="text-green-500 text-lg underline font-bold text-right w-32">Back to home</a>
</div>

Answer 2

你可以这样 position:absolute

    <div class="relative flex items-center justify-center">
      <h1>LOGO</h1>

      <a href="/" class="absolute inset-y-0 right-5 my-auto">
        Back to home
      </a>
    </div>

header顺风对齐

header alignment in tailwind

laravel

tailwind-css