How to make a price display within a circle with CSS?

Question

I have this code:

.special-price {
  text-align: center;
  background-color: #2e566e;
}

.special-price .offer {
  border-radius: 50%;
  background-color: #56c243;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  height: 150px;
  width: 150px;
  display: inline-block;
  text-align: center;
  border: 1px solid;
}

.offer .symbol {
  vertical-align: top;
}

.offer .dollars {
  font-size: 60px;
}

.offer .cents {
  vertical-align: top;
}

<div class="row">
  <div class="special-price col-xs-12 col-md-8 col-md-offset-2">
    <div class="general-comparison clearfix">
      <div class="offer">
        <sup class="symbol">$</sup><span class="dollars">34</span><sup class="cents">.99</sup><span class="tax">+ TAX</span>
      </div>
      <!-- end .general-comparison -->
    </div>
  </div>
</div>

Question/Issue

Why is the dollar sign going outside the circle?
I have set the parent container's text-align:center so why is the child element offer not centered within the parent element special-price?

I am open to other suggestions, I just want this to look nice but unfortunately I am not a designer.

Here is the JSFiddle in case you want to see a demo.

remove the vertical-align:top you defined and add this to the circle `padding-top: 34px; box-sizing: border-box;` — Temani Afif, Feb 19 '18 at 00:04
@TemaniAfif Thanks but then the $ symbol and the cents will not be at the top and looks odd. — CodingYoshi, Feb 19 '18 at 00:13

score 2 · Accepted Answer · answered Feb 19 '18 at 00:26

This previous answer has a variety of techniques for vertically centering text.

I added another div price within the offer, as the offer was really representing the bubble so trying to position the text within it is harder without it's own context.

<div class="offer">
  <div class="price">
    <sup class="symbol">$</sup><span class="dollars">34</span><sup class="cents">.99</sup><span class="tax">+ TAX</span>
  </div>
</div>

Check out this JSFiddle. I also made the text a bit larger and put the +TAX on a new line to break things up a bit.

That is great, this will do for now. I like the fact you made another div for the price. — CodingYoshi, Feb 19 '18 at 00:41

score 1 · Answer 2 · answered Feb 19 '18 at 00:29

If you want to change the price and unit later here is a version with splitted content. Otherwise you also could put the Dollar unit and cents into the before and after pseudos.

I like to use the flex for stuff like this. display: flex; align-items: center; centers the content in vertical and horizontal in the section circle. the display: flex; in p tag centers the sup tags on horizontal.

* {
  box-sizing: border-box;
}

.price {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: green;
  display: flex;
  align-items: center;
  color: #fff;
  }

.price, .price * {
  margin: 0;
  padding: 0;
}
    
.price p {
  font-size: 24px;
  display: flex;
  margin: 0 auto;
 }
 
 .price p sup {
  font-size: 12px;
 }

<section class='price'>
  <p>
  <sup>$</sup>
  34
  <sup>.99</sup>
  </p>
</section>

score 0 · Answer 3 · answered Feb 19 '18 at 00:09

0

To fix these issues you can add

line-height: 2.6; to .special-price .offer

and change vertical-align to middle in both .offer .symbol and .offer .cents.

That should do the trick. Just play with the value of line-height as you wish to achieve the desired output.

answered Feb 19 '18 at 00:09

Claudio Cortese

1,372
2
10
21

Changing to `middle` makes it look weird. I need it to line up with the top of the dollars figure. – CodingYoshi Feb 19 '18 at 00:14

How to make a price display within a circle with CSS?

3 Answers3