Can't center the middle text

January 24, 2024

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.