Q:

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

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.

A:

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.

