center element based on the container size, still not possible ?
Hi . so as you can see in my picture , we have a very simple header .
i have a header tag with 3 elements in it . Like usual i want the middle element to be centered exactly in the middle (the center origin of the middle element should be exactly at the half of the header element width).
No matter the size of the other elements.
obviously i know there is many ways to do this with javascript or fixed values .
i am looking for a css only , best practice solution type of thing .
i cant see any possibility with flex, grid or column, witch just seems weird to me.
maybe i forgot or maybe i never encounter the solution or maybe it's still not possible.
thanks for your time ! happy coding !

3 Replies
any reason
grid-template-columns: repeat(3, 1fr);
wouldn't work?pfff spent an hour on this cause grid-template-columns didn't seems to work .
And it just doesn't look centered but it actually is. sometimes distance can be so deceiving .
Sorry sorry
thanks tho
no worries, glad it worked