Issue
I'm working with React and Tailwindcss. I have 3 items on my navbar. One logo, one text and one icon.
I gave them justify-between to seperate but because of logo's width, the text that suppossed to be in the middle is not in the middle. Instead, a little on the right.
Here's my code
<div className="flex justify-between">
<div>
<img src={logo} alt="logo" width={75} />
</div>
<div className="my-auto">Middle Text</div>
<div className="my-auto ">
<RxHamburgerMenu size={25} />
</div>
</div>
I tried giving it justify-between but text is off the center.
Solution
You could consider using a CSS grid layout instead:
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<div class="grid grid-cols-[1fr_auto_1fr]">
<div class="justify-self-start">
<img src="https://picsum.photos/75/75" alt="logo" width="75" />
</div>
<div class="my-auto">Middle Text</div>
<div class="my-auto justify-self-end">
<RxHamburgerMenu>RxHamburgerMenu</RxHamburgerMenu>
</div>
</div>
</div>
The 1fr
for the left and right grid columns ensures these columns are equal width, thus ensuring the middle column that the text occupies is in the middle.
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.