Jusitify self end not working tailwindcsss

June 17, 2024

Trying to center the image while having the nav bar set on the right of the page

 <nav class="px-6 py-4">
        <div class="justify-center flex items-center">
          <div>
              <img class="flex h-12 " src="https://www.applesfromny.com/wp-content/uploads/2020/06/SnapdragonNEW.png"> 
          </div>
          <button class="justify-self-end">
            <i class="fa-solid fa-bars fa-xl"></i>
          </button>
        </div>
    </nav>

I have read through the tailwindcss docs, I’m still unable to fix this issue.

>Solution :

You could consider using a three-column grid layout. Have the left and right columns be equal length by setting their grid column track sizings to 1fr. This would mean the middle column would be centered. Place the image in this middle column.

<script src="https://cdn.tailwindcss.com/3.4.4"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<nav class="px-6 py-4">
  <div class="grid grid-cols-[1fr_auto_1fr] items-center">
    <div class="col-start-2">
      <img class="flex h-12 " src="https://www.applesfromny.com/wp-content/uploads/2020/06/SnapdragonNEW.png">
    </div>
    <button class="justify-self-end">
      <i class="fa-solid fa-bars fa-xl"></i>
    </button>
  </div>
</nav>