Seeking Assistance: Centering Issue with Flexbox Header
Hi, I hope you all are doing well.
I am writing code for a little design. However, I am facing an issue. As you can see in my header, I have three items:
1- Logo
2- Day 905 (center)
3- Navigation
The problem I am facing is that when I add margin or padding to my navigation items, it moves my second header item (Day 905) away from the center, and I don't want that. Can anyone please help me understand how I can fix it so that my second header item stays at the center, and why this is happening?
I used flexbox for the header.
Please check the attached image.
1st Image - Before
2nd Image - After
8 Replies
try using grid 😉
A couple of quick options
1. Grid and place it in a specific grid area
2. Transform translate it there
3. Magic number it.
cant we fix it using flex?
What is 3rd option? can you please tell me
not sure if you can. I remember people ask similar question before and the way to go was to use grid
Alright Thank you so much!
Give flexbox position absolute and use rem in the top and right
To make it responsive
why? Grid is the much better solution
If you prefer to use flex (grid would be easier), wrap your elemt with border “day 905” in a div so you have the logo, the nav and the new wrapper div as the direct children of the flex parent. Give them all the same flex basis. Make sure the bordered elemt has a margin inline of auto to keep it in middle and the nav has an margin-inline-start of auto to keep it to the right