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

8 Replies

b1mind•12mo 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•12mo ago

yea 11.5 seems ok. This solution wouldn't occur to me. Thanks!

MarkBoots•12mo 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

Ringhoo•12mo 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•12mo 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•12mo ago

Thanks 🙂

b1mind•12mo ago

Yea like this much better grid ftw

MarkBoots•12mo ago

did i mention I ❤️ grid ? 😉

Gaming

Programming

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