How to center this text?
I am using flex box here. the parent element has justify-content: space-between. I want to center "jdemy" text how to do that?
6 Replies
That looks centered to me? 🤔
if you want to center it between the far left and far right of the element, that's not how flexbox works. It's spacing items evenly based on their size, and dividing the left over space evenly as well
your best bet is to make the left element the same width as the one on the right, but you'll have to adjust its width yourself. There's no magic flex property that'll save you here
Well there's a different approach you could take. You could wrap both the menu burger and the elements on the right in a separate div. So toplevel you have:
- Left-wrapper
- Name
- Right-wrapper
And make that a grid:
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto;
Then inside the left wrapper you can make that a flexbox and justify-items start
and inside the right wrapper flex justify-items end.
I think a similar situation appeared in crl course.
1. The text and search bar section can be wrapped into one div.
2. That div can be given display flex and then the flex grow 1, considering the whole navbar is display flex.This will cause the the div with text and search bar to grow.
3. Give the search bar and text wrapper div space between justify
4. And then give the margin 0 auto to the text.
Hopefully this should work.
P.S. - From HTML point of view, the wrapper won't make sense semantically. It did in CRL course , as all the items in the wrapper was navigation menus only.
@somnath_golui https://codepen.io/koffiemetschaap/pen/NWEMwyw
Thank you so so much. You just saved me.
Thanks everyone else for replying I read your message it did help me to understand thing better.