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

Eliminating Unnecessary Stylesheets in Vite and Vue Website

When working on the Vite-Vue application, I noticed that the styles I implemented for both index.html and Vue components/views are showing up as crossed out in the browser. Additionally, many of the styles I added to the components/views are also being cro ...

cssvue.jsvuejs3vite

The div in Bootstrap is not becoming scrollable despite using "overflow: auto"

I have a unique setup with two divs nested inside another div. The first div contains a table, while the second div holds buttons. I'm trying to make the table div scrollable by using overflow-auto, but it's not working as expected. I suspect tha ...

htmlcsstwitter-bootstrapbootstrap-4

Extension for Chrome that enhances YouTube video playback experience

I'm struggling to figure out why this isn't functioning. I've reviewed the Google extension dev docs and examined some sample code. Checked various Stack Overflow questions and answers, but haven't received any helpful feedback or res ...

javascripthtmlgoogle-chrome-extension

Injecting services differently in specific scenarios in AngularJS

I have a unique angular service called $superService that I utilize across many of my directives and controllers. However, there is one specific directive where I want to implement the following behavior: If another directive utilizes $superService in its ...

javascripthtmlangularjsdependency-injection

Automatic Addition of Row Numbers Enabled

I'm currently exploring coding and experimenting with creating a scorekeeper for family games. I've managed to add rows dynamically and automatically sum up the entered information in the "total" row at the bottom. However, I'm facing an iss ...

javascriptjqueryhtmlcss

Having trouble with your custom accordion content in React JS not sliding open?

Check out my progress so far with the fully functioning view here This is the structure of the Accordion component: const Accordion = ({ data }) => { return ( <div className={"wrapper"}> <ul className={"accordionList ...

javascriptcssreactjs

Failure to connect HTML and CSS files

My HTML and CSS files are not linking even though they are in the same folder. Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl ...

htmlcss

JavaScript: Collection of Pictures

I've recently begun my journey into HTML and JavaScript by working on a basic website that showcases four images using a for loop. However, upon viewing the website in a browser, I noticed that only the names of the images are displayed, not the actua ...

javascripthtml

Automatically scroll to the end of the data retrieved through ajax

I am currently developing a live chat website for my users and I am using ajax to fetch the chat messages. However, I am facing an issue where whenever I enter a new message, it does get added to the database and displayed, but the scroll doesn't auto ...

javascriptjquerycssajax

Tutorial on Removing and Re-Adding HTML Elements

Currently, I am utilizing Jquery to temporarily remove an element from the DOM. This specific element consists of an HTML5 video element. However, upon re-adding this element back into the DOM, the video is unable to play and the element appears as blank o ...

javascriptjqueryhtmldomhtml5-video

Display div - conceal div - pause for 15 minutes - continue the cycle

I have a challenging JavaScript task that I've been struggling with for quite some time. The goal is to display a div for 5 seconds, hide it, wait for 15 minutes, then show it again for another 5 seconds, and continue this process in an infinite loop. ...

javascriptjqueryhtmlhideshow

Step-by-step guide to importing a directory in ReactJS

Is there a way to create an input that can upload an entire directory with all its folders intact? I attempted the following code: <input ref={wrapperRef} id="file-upload" name="file-upload" type="file" ...

htmlreactjsnext.js

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

webkitcss

Dynamic JavaScript animation to retrieve the position of an element on-the-fly

I am currently exploring the world of animation in JavaScript and I have a few practical questions. In my script, I am attempting to "launch" a "rocket" upon clicking a "button". What I've observed is that although my function calculates values as int ...

javascripthtmlcssanimation

Ways to update row background color based on specific column values

I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...

javascriptcssdatatable

Tips for setting up personalized breakpoints for a Bootstrap navbar

I am currently facing an issue with my navbar on tablet view. Despite implementing custom breakpoints to collapse the navbar at 1050, the menu bar is appearing in two rows instead of one. I have tried using the code below but it doesn't seem to be wor ...

csstwitter-bootstrap

Generate a series of buttons with generic identifiers that can be easily targeted using getElementById. The IDs will be dynamically assigned

I am looking to dynamically generate unique IDs for a list of buttons, allowing me to easily target specific buttons using getElementById. Here is an example code snippet where each button has the same ID: @foreach (var cat in Model) { <div clas ...

javascripthtml.netajaxgetelementbyid

The left side of the form input material is obscured unless the necessary criteria are fulfilled

I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red ...

cssangularmaterial-uiangular-material

Automatically Dismissing a Bootstrap Alert After a Set Number of Seconds

Having some trouble closing a Bootstrap alert automatically on my new site built using the Bootstrap Framework. The issue arises when trying to close the alert after a certain amount of time. On the main page of the site, there is a modal login form. When ...

javascriptphpjqueryhtmltwitter-bootstrap

The text area within the input group is misaligned with the input group button

Here is an example of how I'm using the input group feature with Bootstrap: <div class="input-group" style="padding-left: 20px;"> <input type="text" name="s" class="form-control input-sm"> <span class="input-group-btn"> ...

htmlcsstwitter-bootstrap