Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
9 replies
Ringhoo

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 {
  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
image.png
Was this page helpful?