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