Is there a way of removing an element from a center calculation

Question

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 class="flex-center">
  <div>Some normal text</div>
  <div class="offer"><sup>$</sup>250</div>
  <div>Text</div>
</div>

Correct me if I am wrong. You want the **numeric amount** to be centered; and the **dollar symbol `$`** to NOT be centered; instead you want it to be left-aligned? — akaAbdullahMateen, Aug 10 '22 at 18:51
I want the 250 to be how center is calculated. If that makes sense? — Bibberty, Aug 10 '22 at 18:58
Not using flexbox. If the element has width it will affect centering unless removed from the flow. See https://stackoverflow.com/questions/55393088/align-3-unequal-blocks-left-center-and-right — Paulie_D, Aug 10 '22 at 19:14
Position the $ absolutely and it will not affect the centering — Paulie_D, Aug 10 '22 at 19:18

Diego D · Accepted Answer · 2022-08-11T07:36:17.700

2

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 show the $ sign using the content css property

EDIT: As @TemaniAfif suggested in comments, I replaced the fixed left offset with the right offset set as 100%

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;*/
  right: 100%;   
}

<div class="flex-center">
  <div>Some normal text</div>
  <div class="offer">250</div>
  <div>Text</div>
</div>

edited Aug 11 '22 at 07:36

answered Aug 10 '22 at 19:16

Diego D

6,156
2
17
30

This is what I was thinking, but I guessed OP did not want to mess with `margin-left` or `left` and the likes. – akaAbdullahMateen Aug 10 '22 at 19:28
This is true, but I am ok if using `rem` thanks for both your input on this. – Bibberty Aug 10 '22 at 19:30
Unfortunately I didn’t come up with anything better than using position absolute and in such scenario I didn’t have a better choice afaik than using rem for a left offset. I realized later the same suggestion was also given in comments. By the way @akaAbdullahMateen your request for clarification helped me to better understand the request at first – Diego D Aug 10 '22 at 19:47
2

@Bibberty I would use right: 100% instead of left – Temani Afif Aug 10 '22 at 21:53
@TemaniAfif I updated my answer crediting your suggestion – Diego D Aug 11 '22 at 07:36

Is there a way of removing an element from a center calculation

1 Answers1