Aligning text in a vertical progress bar using absolute positioning

Currently, I am trying to create a health bar-like element but I am facing difficulties in centering the text within it. Despite exhausting all my options, the text is either off-center when its length changes or extends beyond the borders of the bar.

Here's how it appears with my current CSS:

http://prntscr.com/lr9l9c

.bar{
position: relative;
background: #1DA598;
height: 96px;
width: 16px;
border: 1px solid #333;
margin-top: 72px;
margin-left: 24px;
}

.barFiller{
    width: 100%;
    height: 90%;
    transition: width .2s ease-in;
}

.barText{
    position: absolute;
    bottom: 50%;
    top: 50%;
    width: 100%;
    transform: rotate(-90deg);
    color: "white"
}

Both barFiller and barText are children elements of the bar.

Even setting margins to auto and adjusting top, left, right, and bot values to 0 did not yield satisfactory results. Are there any other alternatives? The text should be centered regardless of the number of digits displayed on the progress bar.

htmlcss

Answer №1

You can utilize both rotate and translate within the css transform property by following this example:

.bar {
  border: 1px solid black;
  width: 20px;
  height: 100px;
  position: relative;
}

@keyframes health {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.barFiller {
  animation: health 3s linear infinite;
  width: 100%;
  background: red;
  position: absolute;
  bottom: 0;
}

.barText {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  color: rgb(0, 255, 255); 
  mix-blend-mode: difference;
}
<div class="bar">
  <div class="barFiller"></div>
  <div class="barText">Logan</div>
</div>

Answer №2

For precise control over the size of the bar, it is recommended to use pixel values instead of percentages.

.bar {
  position: relative;
  background: #1da598;
  height: 96px;
  width: 16px;
  border: 1px solid #333;
  margin-top: 72px;
  margin-left: 24px;
}

.barFiller {
  width: 100%;
  height: 90%;
  transition: width 0.2s ease-in;
  background: red;
}

.barText {
  position: absolute;
  height: 15px;
  top: 40px;
  transform: rotate(-90deg);
  color: white;
}

https://codepen.io/rgarcianuskin/pen/MzMVdo

Answer №3

give this a shot:

.barText{
    position: fixed;
    line-height: 120px;
    top: 10%;
    bottom: 55%;
    right: 20%;
    left: 40%;
    transform: rotate(-90deg);
    color: "black"
}

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

Firefox Cookie Expiry Date Automatically Set to One Week in Default Settings

I recently encountered an issue while trying to create a cookie that would persist for a year. Interestingly, the code I used worked perfectly on Chrome, as I could verify by checking the "Storage" in the dev tools. However, when I tried the same code on F ...

javascripthtmlfirefoxcookiessetcookie

Artwork - Circular design disappears without warning

While working on a clock project purely for enjoyment, I noticed that the minute arc disappears from the canvas as soon as a new minute begins. Any idea why this is happening? Check out the clock in action: https://jsfiddle.net/y0bson6f/ HTML <canvas ...

javascriptcsshtmlcanvas

Creating an Android application that integrates HTML styling efficiently

I currently have a social networking site with a mobile web version, and my goal is to package that view into an Android app and potentially enhance it with a custom splash screen. Essentially creating a branded browser window. If you have any tips or adv ...

jqueryandroidhtmlcssweb

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

What is the best way to retrieve ul li values using AngularJS?

I am looking to extract the content of li elements within a ul element in an AngularJS controller and save them into an array. Sample HTML Code: <ul id="list" my-directive> <li>A</li> <li>B</li> <li>C ...

javascripthtmlangularjs

Enhance your website with footer animations using jQuery!

I am implementing a sticky footer on my website to keep the footer at the bottom using CSS. I want the footer to initially be collapsed and expand when the user clicks on a button, swapping the "expand" link with a different container div inside the footer ...

jqueryhtmlcssfootersticky-footer

What is the process for reducing the value displayed on the label?

I have three labels and I would like to subtract the value of two labels and place the result in the third label. $(document).ready(function() { //Retrieve the values from both labels var value1 = document.getElementById("addition").innerText; ...

javascripthtmljquerysubtraction

Having trouble getting dropdown values to work properly in HTML?

Currently, I'm encountering an issue with a drop-down menu that contains the days of the month (ranging from 1 to 31). When I input "22," it seems to default to loading option "20" instead. Displayed below is the code snippet that I am currently usin ...

phphtml

Click event triggers nested bootstrap collapse

As a beginner in bootstraps and coding, I am currently experimenting with opening the main bootstrap panel using an onclick event that includes nested sub panels. Here is my index.html file containing the panels and the button; <link href="https://m ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive

I attempted to create a login form on an HTML page using Angular, featuring a full-size background image that is centered. The form itself is contained within a div with a blurred background, also centered both horizontally and vertically within the browse ...

htmlcssangularresponsive

How can I display different divs based on a selected option?

I'm encountering difficulties while attempting to develop the code for this specific task. My goal is to display or hide divs based on the selection made in a select option, with a total of 4 options available. There are 2 select elements <select ...

javascriptjqueryhtmlcss

Ways to change the border color of Bootstrap cards

While working on my webpage, I utilized bootstrap cards to maintain a clean and organized layout. By default, bootstrap cards are white in color. Unlike the navbar, where you can easily set color options like navbar-dark, changing the color of the cards re ...

htmlcssbootstrap-4bootstrap-5bootstrap-cards

What are the best ways to optimize and capitalize on functionality in Electron.js?

After creating three custom buttons for the close, maximize, and minimize functions in Electron.js, I encountered an issue. While the close button is functioning properly, I am struggling with implementing the maximize and minimize buttons. In fact, I have ...

javascripthtmlcsselectron

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

javascriptcssangulartypescript

Is there a way to change my cursor to a pointer finger when hovering over my box?

<script type="text/javascript"> function draw() { var canvas = document.getElementById('Background'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.lineWidth = 0.4 ctx.strokeRect(15, 135, 240, 40) Is there a w ...

javascripthtmlcss

Could you provide steps for verifying the functionality of the show password feature in selenium?

What is the best way to verify that the show password feature is functioning correctly? Which checkbox property should I inspect after clicking on the 'show password' checkbox to confirm that the entered text in the password field is visible? ...

javahtmlselenium-webdriver

Tips for creating a div that gracefully fades out its background image when hovered over, while keeping the internal content unaffected

I am looking to create a hover effect on a div element that has a background-color, background-image, and text. What I want is for the background-image to slowly disappear when the div is hovered over, while keeping the text and background color visible. I ...

javascriptjqueryhtmlcss

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

javascripthtmlcss

What should be displayed if there are no search results?

My form for filtering a database is working perfectly in the first section: $result=$dbh->prepare("SELECT * FROM performers WHERE accent='$txt_accent' AND hair='$txt_hair' AND gender='$txt_gender' AND location='$txt_l ...

phphtmlmysql

How can I prevent Chrome from constantly prompting for permission to access the camera?

I have been working on some HTML/JavaScript/WebRTC projects that involve using the webcam. Despite hosting the files from my local web server (127.0.0.1), Chrome always prompts me for permission to access the camera each time I reload the page. Is there a ...

javascripthtmlgoogle-chromecamerawebrtc