What is the best way to line up a number and text using CSS?

Creating a basic gauge meter with min value 0 and max value 2.

The current UI progress is as follows:

.sc-gauge  { width:200px; height:200px; margin:200px auto; }

.sc-background { position:relative; height:100px; margin-bottom:10px; background-color:gray; border-radius:150px 150px 0 0; overflow:hidden; text-align:center; }

.sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color:#fff; border-radius:150px 150px 0 0 }

.sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#00aeef; }

.sc-percentage { transform:rotate(70deg); transform-origin:top center; }

.sc-min { float:left; }

.sc-max { float:right; }

.sc-avg {position: absolute; top: 75%;left: 50%;}

.sc-value { position:absolute; top:50%; left:0; width:100%;  font-size:48px; font-weight:700 }
<div class="sc-gauge">
    <div class="sc-background">
      <div class="sc-percentage"></div>
      <div class="sc-mask"></div>
      <span class="sc-value">0.7 gb</span>
    </div>
    <span class="sc-min">0</span>
    <span class="sc-avg">1</span>
    <span class="sc-max">2</span>
</div>

Desired output should look like this:

https://i.sstatic.net/RLpKP.png

Pending UI updates include:

-> Positioning of 0 and 2 precisely at the start and end of the chart respectively.

-> Adding small lines in the left, top, and right sides of the chart.

-> Placing the number 1 at the center top of the chart.

If unclear, please refer to the image attached for exact UI details.

My attempts to align numbers 0 and 2 as per the image:

.sc-percentage {
  position: relative;
}

.sc-min {
  position: absolute;
  left: 0;
}

.sc-max {
  position: absolute;
  left: 0;
}

To add a line at the top of the chart and position number 1:

.sc-avg {position: absolute; top: 75%;left: 50%;}

Unfortunately, these adjustments didn't yield the expected results..

Having difficulty with this CSS task... Seeking guidance to achieve the exact UI depicted in the provided image.

htmlcsscharts

Answer №1

Give this a try: (Feel free to customize the positioning using the top and left/right css properties)

.sc-gauge  { 
   width:200px; 
   height:200px; 
   margin:200px auto;
 }   
.sc-background { 
   position:relative; 
   height:100px; 
   margin-bottom:10px; 
   background-color:gray; 
   border-radius:150px 150px 0 0; 
   overflow:hidden; 
   text-align:center; 
}

.sc-mask { 
   position:absolute; 
   top:20px; 
   right:20px; 
   left:20px; 
   height:80px; 
   background-color:#fff; 
   border-radius:150px 150px 0 0
}

.sc-percentage { 
   position:absolute;  
   top:100px; 
   left:-200%; 
   width:400%; 
   height:400%; 
   margin-left:100px; 
   background-color:#00aeef; 
}

.sc-percentage { 
   transform:rotate(70deg); 
   transform-origin:top center; 
}

.sc-min { 
  position: relative;
  top:-13%;
  left: -7%;
  font-size: 12px;
  color: gray;
}
.line-min{
  color: #00aeef;
}
.sc-max { 
  position: relative; 
  top: -13%; 
  left: 82%; 
  font-size: 12px;
  color: gray;
}
.line-max{
  color: gray;
}
.sc-avg {
  position: relative; 
  top: -68%;
  left: 41%;
  font-size: 12px;
  color: gray;
}
.line-avg {
  position: relative;
  top: -59%;
  right: -37%;
  color: gray;
}
.sc-value { 
  position:absolute; 
  top:50%; 
  left:0; 
  width:100%;  
  font-size:38px; 
  font-weight:700; 
}
<div class="sc-gauge">
<div class="sc-background">
  <div class="sc-percentage"></div>
  <div class="sc-mask"></div>
  <span class="sc-value">0.7 gb</span>
</div>
<span class="sc-min">0  
  <span class="line-min">_</span>
</span>
<span class="sc-avg">1</span>
<span class="line-avg">|</span>
<span class="sc-max">
  <span class="line-max">_</span> 2</span>
</div>

Answer №2

Hey there, is this the design you were looking for?

.custom-gauge {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 200px auto;
}

.custom-background {
  position: relative;
  height: 100px;
  margin-bottom: 10px;
  background-color: gray;
  border-radius: 150px 150px 0 0;
  overflow: hidden;
  text-align: center;
}

.custom-mask {
  position: absolute;
  top: 20px;
  right: 20px;
  left: 20px;
  height: 80px;
  background-color: #fff;
  border-radius: 150px 150px 0 0;
}

.custom-percentage {
  position: absolute;
  top: 100px;
  left: -200%;
  width: 400%;
  height: 400%;
  margin-left: 100px;
  background-color: #00aeef;
}

.custom-percentage {
  transform: rotate(70deg);
  transform-origin: top center;
}

.custom-min {
  float: left;
}
.custom-max {
  float: right;
}
.custom-avg {
  position: absolute;
  top: -12%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.custom-value {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  font-size: 38px;
  font-weight: 700;
}

.custom-gauge::after {
  content: "";
  width: 2px;
  height: 10px;
  background-color: lightgray;
  position: absolute;
  top: -10px;
  left: 50%;
}

Check out the code here

Answer №3

To ensure proper positioning on the wrap element with class .sc-gauge, it is recommended to include position: relative;. Subsequently, you can utilize position: absolute; for the child elements.

Consider updating these classes:

.sc-gauge {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 200px auto;
}

.sc-min {
    position: absolute;
    left: -20px;
    margin-top: -27px;
}

.sc-avg {
    position: absolute;
    top: -23px;
    left: 50%;
}

.sc-max {
    position: absolute;
    right: -20px;
    margin-top: -27px;
}

Here's an example:

.sc-background {
    position: relative;
    height: 100px;
    margin-bottom: 10px;
    background-color: gray;
    border-radius: 150px 150px 0 0;
    overflow: hidden;
    text-align: center;
}

.sc-mask {
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;
    height: 80px;
    background-color: #fff;
    border-radius: 150px 150px 0 0
}

.sc-percentage {
    position: absolute;
    top: 100px;
    left: -200%;
    width: 400%;
    height: 400%;
    margin-left: 100px;
    background-color: #00aeef;
}

.sc-percentage {
    transform: rotate(70deg);
    transform-origin: top center;
}

.sc-value {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    font-size: 48px;
    font-weight:700
}

/*  */

.sc-gauge {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 200px auto;
}

.sc-min {
    position: absolute;
    left: -20px;
    margin-top: -27px;
}

.sc-avg {
    position: absolute;
    top: -23px;
    left: 50%;
}

.sc-max {
    position: absolute;
    right: -20px;
    margin-top: -27px;
}
<div class="sc-gauge">
    <div class="sc-background">
        <div class="sc-percentage"></div>
        <div class="sc-mask"></div>
        <span class="sc-value">0.7 gb</span>
    </div>
    <span class="sc-min">0</span>
    <span class="sc-avg">1</span>
    <span class="sc-max">2</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to implement material-ui button design on an HTML-native button

I am using pure-react-carousel which provides me an unstyled HTML button (ButtonBack). I would like to customize its style using material-ui. Trying to nest buttons within buttons is considered not allowed. An approach that works is manually assigning th ...

javascriptcssreactjstypescriptmaterial-ui

Font Awesome icons are preventing the navigation bar from collapsing

Just getting started with Bootstrap and facing an issue. I want to include a collapsed user icon that expands when clicked. However, when I add the navbar-toggle class, the icon disappears completely. Without it, the icon appears but doesn't collapse ...

htmlcssbootstrap-4

Update a particular class following an AJAX POST request in JavaScript

After conducting extensive research, I have come here seeking your assistance with a particular issue: I am using a comment system with multiple forms on the same page (utilizing FOSCommentBundle in Symfony). My goal is to be able to post comments via Aja ...

javascriptjqueryhtmlajaxsymfony

Refresh an image on my webpage using jQuery

There seems to be an issue on my page where one of the images only displays after reloading the page. Initially, the image only loads partially. The reason behind this behavior is still unclear to me. I've been attempting to reload only the image on ...

jquerycsshtml

Achieving nested classes in CSS: a comprehensive guide

I am encountering an issue with my CSS while trying to create a dropdown on hover. The problem seems to be related to nested classes inside a div structure. It appears that the dropdown list is not displaying properly, leading me to believe there might be ...

htmlcss

What is the best way to align the main navigation at the center of

Even though I have utilized text-align: center, the style of .main-nav did not change. What is the most effective way to center this navigation menu? /***** Navigation *****/ .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; f ...

css

Interactive website that transitions to a fresh page as we scroll further

As a beginner in web design, I've noticed a trend of companies using websites that automatically transition to the next page when scrolling down. An example of this is . What is this type of template called and are there any open source designs availa ...

cssscroll

Ways to retrieve JSON data through multiple levels of nested if statements

Currently, I am using CodeIgniter to work on a small project involving creating batch lists. When an admin attempts to create a new batch list, they must input the start date, end date, start time, and end time. The system will then check the database to s ...

phpjqueryjsonhtmlcodeigniter-3

Can the border become fainter and then more pronounced when hovered over?

Does anyone know of a simple method to create a fading effect for a CSS border-bottom when hovering over an image, and then have the border fade out once the hover is removed? <div class="hover"> <img src="images/ex.jpg"/> </div> ...

jqueryhtmlcss

Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text. <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-sm-2"> <div c ...

htmlcsstwitter-bootstrapbootstrap-4

Passing a click event to a reusable component in Angular 2 for enhanced functionality

I am currently working on abstracting out a table that is used by several components. While most of my dynamic table population needs have been met, I am facing a challenge with making the rows clickable in one instance of the table. Previously, I simply ...

javascripthtmlangulartypescriptevent-handling

Exploring Objects within an array using Angular loops

Hey there, I'm currently working on an Angular project and I need to retrieve the userName of the user for each comment that is posted. These entities are coming from my Spring Boot project. Is there a way to access the username for every comment? He ...

htmlangulartypescriptloops

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

htmlcsstwitter-bootstrap

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...

javascripthtmlangulardom

How can I remove a dynamically added <tr> element using jQuery?

I insert the <tr> into the <tbody> for (var i = 0 ;i < 12 ;i++){ $(`<tr><td>test</td></tr>`).appendTo('#songsTbody'); } within this HTML structure. <tbody id="songsTbody"> </tbody> ...

javascripthtmljquery

Unable to activate/deactivate the form components on a Grails webpage

I have multiple forms and buttons on a single page in my Grails application. What I'm trying to achieve is the ability to hide and show different forms on the page using an enable button with jQuery. I attempted to use ID selectors, but this resulted ...

jqueryhtmltemplatesgrails

URL relative references across multiple domains

Here's a quick question: When developing themes and coding, how do you navigate linking to different files in your html/css code? For example: At our company, we mostly use <base target="http://whatever"> in our main template and then simply r ...

htmlrelative-path

Unlock the Power of Vue Draggable in Vue.js 3 with These Simple Steps

When attempting to implement Draggable in Vue.js 3, I encountered an error message: VueCompilerError: v-slot can only be used on components or <template> tags. Below is a snippet of my code: <draggable tag="transiton-group" name="s ...

javascripthtmlvue.jsdraggablevuejs3

The default value of the input color in HTML/NextJS does not update when changed

Issue: The color input does not change when the default value (#ffffff) is declared. https://i.sstatic.net/BpqUj.png However, it works normally if I don't declare a default value. https://i.sstatic.net/0dBd6.png Note: Using NextJS framework. <i ...

javascripthtmlcssreactjsnext.js

Enable the text to wrap around an interactive object that the user can freely manipulate

Looking for a solution where I can have a floating div that can be moved up and down using javascript while the text wraps around it seamlessly. Similar to how an object positioned in a word document behaves, I want the text to flow around the div both ab ...

javascripthtmlcsscss-float