So, I am building a banner, the content needs to be responsive. I am using flex with center. But the issue is the dollar amount needs to be centered and not the $ dollar amount.

I have tackled this with a negative margin, but it is clunky. I was wondering is the was a way to mark the $ as not included in the center calculation.

.flex-center {
 padding: 3rem;
 border: 1px solid black;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-size: 2rem;
}

.offer { 
 font-size: 3rem;
 font-weight: bold;
}

.offer sup {
 font-size: 2rem;
}

<div >
  <div>Some normal text</div>
  <div ><sup>$</sup>250</div>
  <div>Text</div>
</div>

CodePudding user response：

If you meant to exclude the $ sign away from the document flow so that only the price tag width was considered for centering, one solution could be:

• Remove the <sup> element entirely
• Make the container position:relative
• make a new css rule adding the pseudo element ::before positioned absolute to add the $ sign using the content css attribute

This is a demo:

.flex-center {
 padding: 3rem;
 border: 1px solid black;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-size: 2rem;
}

.offer { 
  position: relative;
  font-size: 3rem;
  font-weight: bold;
}

.offer::before {
  content: '$';
  font-size: 2rem;
  position: absolute;
  left: -1.25rem;
}

<div >
  <div>Some normal text</div>
  <div >250</div>
  <div>Text</div>
</div>