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:

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

Controlling screen size in fullscreen mode for HTML5 videos: a guide to manipulation

Within my website, I have incorporated a <video> element nestled inside a <div>. This particular <div> serves the purpose of defining the video aspect ratio, allowing users to adjust it if necessary (for instances where the encoded video ...

csshtmlvideofullscreen

Attempting to ensure that the social media icons are perfectly centered in between the separators on the page

After adding new menu separators, the alignment of my social media icons has been thrown off and I need them to be centered. I'm not sure why this happened or how to fix it. I attempted to add some CSS but had no success. My website can be found at . ...

htmlcsswebiconsalignment

trouble with overlapping mdl-sheet instances

Hey there! I have a quick question - Is it possible to have multiple mdl-sheets on one page that all share the same form? I tried implementing this but ended up with them overlapping each other instead of displaying next to each other from left to right. ...

jqueryhtmlcssmaterial-design-lite

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

including a content tag into an input field within a template

I'm experimenting with the new html5 template tag to create a versatile form that can be used in various situations without relying heavily on javascript. Check out this fiddle to see what I have so far http://jsfiddle.net/684uH/ My objective is to ...

javascripthtmlweb-componenthtml5-template

Choosing the image that represents your website in Safari web previews

Every time I check iCloud.com on my Safari top sites, the thumbnail is always the same. I'm curious about how I can automate this for my own website. ...

javascripthtmlcss

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

htmlangulartypescript

Dynamic filtering of items using Knockout's foreach binding based on value change

I'm working on some HTML/Knockout code where I want to display a dayDivider div only when there is a new date. This means that messages from the same day should appear under a date banner. Typically, I would save the last value in a temporary variable ...

jqueryhtmlknockout.js

What is the best way to ensure that all elements inside a Grid item extend to the bottom, except for the text?

I currently have four columns within a Grid container, each structured as follows: <Grid item> <Typography>Big Title 1</Typography> <Card className={classes.stretchMe}> <CardContent> ...

cssreactjsmaterial-ui

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

htmlcsshtml-lists

Maintain scrolling at the bottom with React.js

Is there a way to make a div element increase in height through an animation without extending beyond the viewable area, causing the window to automatically scroll down as the div expands? I am looking for a solution that will keep the scroll position lock ...

javascriptcssreactjs

The font-size transition using CSS3 is experiencing a lack of smoothness specifically in the

I have crafted a simple animation for an h1 element, utilizing css3 and a transition on the font-size. Here is the link to view: http://jsbin.com/oPIQoyoT/1/edit h1 { position: relative; width:500px; height: 500px; font-size: 3em; tra ...

htmlcss

What is the best way to utilize Enquire.js for dynamically adding and removing CSS classes?

I'm looking to dynamically add and remove a css class based on a media query using Enquire.js but I could use some guidance on utilizing the functions properly. Here's what I envision in pseudo code: if (screens max-width > 480px){ #thumb.r ...

javascriptcssenquire.js

Tips for placing a background image on an extended <a> hyperlink in Internet Explorer 6

There seems to be an issue with the background image of a link on my exam project. The requirement is for it to work seamlessly on all browsers, including IE 6. However, the problem arises when the link spans multiple lines in IE 6, causing the background ...

csshtmlbackground-imageinternet-explorer-6

Implementing an unordered list in an inline format, even when it is collapsed with Bootstrap

Recently, I've been delving into Bootstrap and experimenting with coding a basic website. Below is the code for the navbar: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class ...

htmlcsstwitter-bootstrapnavbar

One project contains a pair of React instances

I am currently working on a React Web App and recently encountered an issue with an 'invalid hook call' error. Upon further investigation, I discovered that there are duplicate copies of the React library in my project, including within the CSS f ...

javascripthtmlreactjswebpackredux

The font size calculation is larger than the CSS definition on the Asus Nexus 7 device

Running the website on an Asus Nexus 7 (developed in jQueryMobile), I set the font size in CSS to be 14px. However, while debugging using Chrome on my PC, I noticed that the computed size is actually 22px. Here's a snippet of the HTML code: <div ...

htmlcss

What is the way to display the final list item when clicking in jQuery?

I am attempting to achieve a specific behavior where clicking on a button will trigger the content below to scroll in such a way that only the last item in the list is visible. I have been using jQuery for this functionality, but unfortunately, it is not ...

javascriptjqueryhtmlcss

Organized Styled-components

Considering implementing styled-components in my application and questioning the best organizational approach. Usually, styled-components are associated with a particular component for increased reusability. However, what is the recommended method for us ...

cssreactjsstyled-components

Detecting a click event within a hidden div located behind another visible div

I am facing an issue with triggering ng-click in a div that is covered by another div. The current scenario I have is as follows: Basically, I need to activate ng-click on the yellow circle when it is clicked. However, there is another div positioned abov ...

htmlangularjs