Creating a circular price display using CSS:

Question

Creating a circular price display using CSS:

Below is the code snippet that I am working with:

.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>

Query/Concern

Why does the dollar sign extend beyond the circle?
Even though I have applied text-align:center to the parent container, why is the child element offer not centered within the parent element special-price?

I am open to any suggestions for improving the visual appearance of this, as I do not possess a keen eye for design.

For a demonstration, you can view the JSFiddle linked here.

html css

Answer 1

Answer №1

If you're looking to vertically center text, this previous solution offers a range of methods to achieve that.

My approach involved adding a nested div called price within the main offer container. This allowed for better control over the positioning of the text within the bubble element.

<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>

Here is the https://i.sstatic.net/U7tJh.png for reference.

For a live example, you can view this JSFiddle demonstration. I also increased the text size and moved the +TAX portion to a new line for better readability.

Answer 2

If you're looking to vertically center text, this previous solution offers a range of methods to achieve that.

My approach involved adding a nested div called price within the main offer container. This allowed for better control over the positioning of the text within the bubble element.

<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>

Here is the https://i.sstatic.net/U7tJh.png for reference.

For a live example, you can view this JSFiddle demonstration. I also increased the text size and moved the +TAX portion to a new line for better readability.

Answer 3

Answer №2

If you wish to make adjustments to the price and unit at a later stage, consider utilizing a version with segmented content. Alternatively, you can incorporate the Dollar unit and cents into the pseudo-elements before and after.

For tasks like this, I find using flex to be quite effective. The

display: flex; align-items: center;

property aligns the content both vertically and horizontally within the circular section. Meanwhile, applying display: flex; to the p tag centers the sup tags horizontally.

* {
  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>

Answer 4

If you wish to make adjustments to the price and unit at a later stage, consider utilizing a version with segmented content. Alternatively, you can incorporate the Dollar unit and cents into the pseudo-elements before and after.

For tasks like this, I find using flex to be quite effective. The

display: flex; align-items: center;

property aligns the content both vertically and horizontally within the circular section. Meanwhile, applying display: flex; to the p tag centers the sup tags horizontally.

* {
  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>

Answer 5

Answer №3

If you want to resolve these issues, you should consider implementing the following changes:

line-height: 2.6; should be applied to .special-price .offer

Additionally, you will need to adjust vertical-align to middle for both .offer .symbol and .offer .cents.

By making these adjustments, you should see an improvement in the display. Feel free to modify the line-height value to achieve the desired outcome.

Answer 6

If you want to resolve these issues, you should consider implementing the following changes:

line-height: 2.6; should be applied to .special-price .offer

Additionally, you will need to adjust vertical-align to middle for both .offer .symbol and .offer .cents.

By making these adjustments, you should see an improvement in the display. Feel free to modify the line-height value to achieve the desired outcome.

Creating a circular price display using CSS:

Answer №1

Answer №2

Answer №3

Similar questions

Creating a CSS layout with tabs that include a visually appealing right space

Looking for an alternative to document.querySelectorAll?

Halting the HTML-Embedded Video

Do you mean using a JSON object as a value?

What is the best way to display up to 8 items in a row using flexbox?

Using Jquery and CSS to add a class with a 1-second delay when the mouse enters

A few of the input fields I filled out are not getting sent to the PHP script

Utilizing Jquery to pass two classes along

Detecting iOS format in HTML email communications allows for a more seamless

Having issues with implementing CSS3 animations on my webpage

Ensuring User Input Integrity with JavaScript Prompt Validation

Avoid Conversion of HTML Entities in Table Cells

Toggle Visibility of Div Based on Matching Class Name When Clicked

Flexible layout of perfectly square elements

Conceal one object when the other is revealed?

Having trouble displaying a background image on a React application

Tips on creating a responsive absolute div

The ng-View feature appears to be malfunctioning within AngularJS

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

Activate the WebDAV feature within the .htaccess file