How to horizontally center an element with translated content outside of it's width
I have a heading h3:
Problem is that the translate moves span outside of the h3, which is intentional by design, but how can I center such heading when it's width differs from it's actual width?
So
margin: 0 auto
would not center it correctly..?
Here is a pen: https://codepen.io/Ringhoo/pen/MWLVYwZ8 Replies
11.5ch is probably better? Might depend on the font
yea 11.5 seems ok. This solution wouldn't occur to me. Thanks!
was thinking about this and I don't know if this is wat you exactly want
But if you''d allow the first line to be in a span too, you could use grid.
like this the second line will be centered to the end of the first line. No magic numbers needed
Sure, there can be two spans.. I didn't know headers could be grids, nice. Thanks!
So if you assign element only to 'auto' columns, it will distribute the width evenly according to it's content? I don't think I used the auto keyword much.
So if you assign element only to 'auto' columns, it will distribute the width evenly according to it's content? I don't think I used the auto keyword much.
yep, exactly that. auto is the default for columns btw, but if we set up grid-template columns, you do have to set it
Thanks 🙂
Yea like this much better grid ftw
did i mention I ❤️ grid ? 😉