How to horizontally center an element with translated content outside of it's width

I have a heading h3:
<h3>This is the width <span>extend</span></h3>
<h3>This is the width <span>extend</span></h3>
h3 {
width: fit-content;
}
span{
display:block;
width: fit-content;
margin-inline-start: auto;
translate: 50% 0;
}
h3 {
width: fit-content;
}
span{
display:block;
width: fit-content;
margin-inline-start: auto;
translate: 50% 0;
}
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/MWLVYwZ
No description
8 Replies
b1mind
b1mind12mo ago
span{
display:block;
margin-inline-start: 12ch;
}
span{
display:block;
margin-inline-start: 12ch;
}
11.5ch is probably better? Might depend on the font
Ringhoo
Ringhoo12mo ago
yea 11.5 seems ok. This solution wouldn't occur to me. Thanks!
MarkBoots
MarkBoots12mo ago
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
No description
Ringhoo
Ringhoo12mo ago
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.
MarkBoots
MarkBoots12mo ago
yep, exactly that. auto is the default for columns btw, but if we set up grid-template columns, you do have to set it
Ringhoo
Ringhoo12mo ago
Thanks 🙂
b1mind
b1mind12mo ago
Yea like this much better grid ftw
MarkBoots
MarkBoots12mo ago
did i mention I ❤️ grid ? 😉
Want results from more Discord servers?
Add your server