How to align a number and line using css? - html

Question

I am making a simple gauge meter which has minimum and maximum value as 0 and 2 respectively.
I am able to achieve the UI so far like,
.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>
But the expected output needs to be like this,
The pending UI includes,
-> Placing of 0 and 2 exactly at the left beginning and and right ending of the chart.
-> Making small line in left, top and right of the chart.
-> Placing number 1 at top center of the chart..
If my points are unclear then kindly refer the attached image for exact UI.
Things I have tried to make the number 0 and 2 to left and right like image is,
.sc-percentage {
position: relative;
}
.sc-min {
position: absolute;
left: 0;
}
.sc-max {
position: absolute;
left: 0;
}
To make the line at top of the chart and to place number 1 there, I have tried,
.sc-avg {position: absolute; top: 75%;left: 50%;}
But this doesn't work the way as expected ..
I am stuck with this css work for long time.. Please kindly help me to achieve the the exact UI like in the given image.

Answer 1

Try this:
(You can adjust the position in 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

Is this what you want buddy?
.sc-gauge {
position: relative;
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: -12%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
.sc-value {
position: absolute;
top: 50%;
left: 0;
width: 100%;
font-size: 38px;
font-weight: 700;
}
.sc-gauge::after {
content: "";
width: 2px;
height: 10px;
background-color: lightgray;
position: absolute;
top: -10px;
left: 50%;
}
https://codepen.io/DineshRout/pen/NWdZKMw?editors=1100

Answer 3

On the wrap element with class .sc-gauge you need add position: relative; after this you can use position: absolute; for the child elements
Try to replace this 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;
}
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>