迎风头对齐

Question

我有一个标志和背靠背按钮在标题。徽标必须位于标题的中间，按钮必须位于标头的中间。当我试图证明-之间的标志是在开始。哪个顺风类/类可以给我解决方案？

<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

您可以在您的徽标之前制作一个空元素，以保持左侧的空间。然后对第一个和最后一个元素应用相同的宽度。这样，justify-between将保持标志在中心。这是在尾风播放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>