Html Question posted in
Some basic documentation can be found here.

Html – Jusitify self end not working tailwindcsss

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.

Tags:

2

Answers


  1. 0

    Use ml-auto instead. It gives the item margin-left: auto and ensures it stays on the right despite anything you place left of it.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search