I have a nav with 3 children, a first list, an image and a second list, I want to center the image and have the lists around it. I made a Tailwind Playground for visualisation as I'm using it in my project Thank you for the help

I tried using justify-center on the parent (nav), obviously it doesn't work because the lists do not have the same size, so the egg will never be in the middle. I tried giving the nav a fixed width and center it with an auto margin X, I think it's the best solution but I didn't get it working I tried centering with justify-center then adding a margin on the right the size of the image's div but apparently that was the dumbest attempt because I really thought it would work and it really does not lol

CodePudding user response：

Try use grid on nav, just like:

nav {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
}

See If this is what you want.