header alignment in tailwind-CodePudding

I have a logo and back-to-home button in header. logo has to be in the middle of header and button has to be at the and of header. When I try justify-between logo is at the start. Which tailwind class/classes can give me the solution?

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

CodePudding user response：

You can make an empty element before your logo to hold the space on the left side. And then apply the same width to the first and last elements. This way the justify-between will keep the logo in the center. Here it is on 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>

CodePudding user response：

you can make it position:absolute like this