Aligning text vertically centered within a div

Check out an example of my code here: Jsfiddle

<div id="gameTimeBar-holder">
<div id="gameTimeBar"></div>
<div class="progressBarText">Actions : 852 minutes</div>


#gameTimeBar-holder{width:200px;height:15px;background:grey; position:absolute; top:45px; left:5px;}
#gameTimeBar{width:0;height:100%;background:purple;}
.progressBarText{position:absolute;z-index:10;top:0;left:0;width:100%;text-align:left; color: white;}

Is there a way to vertically center the text in the div progressBarText ?

htmlcss

Answer №1

To enhance the spacing in your text, make sure to include the line-height property.
Give this a try:

.customText{
       position:relative;
       z-index:5;
       top:0;
       left:0; 
       width:100%; 
       line-height:20px; 
       text-align:center; 
       color: black; 
   }

VIEW DEMO

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

Issue encountered while attempting to include a background image in React JS

I encountered an issue when attempting to include a background image in react js. ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css) Unable to locate module: An attem ...

javascripthtmlcssnode.jsreactjs

Embedding HTML React project content onto a webpage using a script

I work for a company that specializes in event management, and we are looking to implement a "content builder" on our event portal. The project involves using React and Next. How can we create a code that allows event organizers to embed their events on ...

htmlreactjsnext.jswidgetembed

Using regular expressions in Python with PyQt4 to eliminate anchor tags from HTML links in text

When using my QTextBrowser, I am able to identify links such as "www.test.com" with the following regular expression: re.compile( r"(\b(?:(?:https?|ftp|file)://|www\.|ftp\.)[-A-Za-z0-9+&@#/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#/%=~_()|])" ...

pythonhtmlregex

Having difficulty rendering the data from a JSON table object using angularjs

I am attempting to showcase my data in an HTML <div> using AngularJS. Here is the code snippet I am using: <pre> {{otherResponse.confirmation | json}} </pre> While I am able to view all my JSON data in the <pre> element, I a ...

htmlangularjsjsonexpress

Stop the creation of new div elements once the minimum height has been reached or when text is past

Here is the HTML code I am working with: <div id='parent' align='right' dir='rtl' style=padding:0px;margin:0px;font-weight:bold;width:300px;height:auto;min-height:300px; "'<div align='right' dir='rt ...

phphtmlasp.netcss

Added the .active state to the menu navigation successfully, however the active color was not implemented

My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...

jqueryhtmlcsswordpress

maintain visibility of website menu while scrolling

I am having trouble getting my drop-down menu to stay fixed at the top of the screen while scrolling down on my website. Despite several attempts, I have not been able to achieve this using the current CSS and menu setup. Can someone please assist me wit ...

javascriptjqueryhtmlcssstatic

Avoiding the overflow of the y-axis by applying a slight left margin to bootstrap columns

Context: I'm in the process of developing a collapsible sidebar navigation menu inspired by the bootstrap admin panel example found at: Issue: Upon collapsing the admin bar, a small bar of icons appears. To accommodate this, I added margin-left: 50 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

aligning two elements within a container to have equal heights

I need to position 2 divs inside a container div. Their height should always be the same, regardless of content. To achieve this, I am using absolute positioning with top and bottom set to 0. Currently, the container div #three collapses and hides the cont ...

htmlcsspositionabsolute

Leveraging the power of Vue.js for a solo project

I've been diving into learning Vue.js for my job, and while I've grasped the syntax, I have a specific query regarding setting up a full project. Up to this point, I've used npm to start a project, either through the command line or by util ...

javascripthtmlcssvue.js

Make sure to incorporate the Readme.md file into your HTML document

I am currently managing a static HTML page on my personal server. The README.md file for this project is stored in a public GitHub repository. My goal is to have the contents of the ReadMe automatically included on my local HTML page. Essentially, I am lo ...

htmlgithub

div positioned on top of additional div elements

My HTML code consists of simple div tags <div class="left">Project Name: </div> <div class="right">should have a name</div> <div>Shouldn't this be on a new line?</div> These classes are defined in a stylesheet as ...

htmlcss

Utilize CSS to exclusively filter through items

Is it possible to use CSS alone to filter a list of items based on specific links being clicked? I have a list that should display only certain items when corresponding links are clicked. HTML: <!-- Header links --> <a href="#" class="all" tabin ...

htmlcssselectfiltertabindex

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

javascripthtmlcssvue.js

After clicking, I would like the text from the list item to have a style of "background-color: aqua" when displayed in the textarea

Is there a way to apply a highlight with a style of "background-color: aqua" in the textarea only to the word selected from the list above after clicking on it? See below for my HTML: <head> <script src="https://ajax.googleapis.com/ajax/libs/ ...

javascriptjquerycss

CSS ratings bar styling

Looking to create a unique ratings bar for my website, I have some questions that need answering. Take a look at the codepen link to see what I've come up with so far. My main query is about incorporating two different colors for Likes (green) and Di ...

cssprogress-barrating

Center-align the items in an owl carousel

My website uses owl carousel to display images fetched through PHP. The challenge is that the number of items is unpredictable, and sometimes there are fewer images than the default 10. As a result, the images align to the left instead of being centered. H ...

jqueryhtmlcssowl-carousel

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...

javascripthtmlnode.jsvue.js

Parallax not functioning properly due to CSS before and after elements

I am attempting to use before and after pseudo-elements for a parallax effect on my div element <div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_ima ...

htmlcss

Creating an interactive table with interconnected column values, such as displaying all states associated with a selected country with a single click from a database or array

I am looking to create a table that displays dependent values, such as when clicking on a country, all related states should be highlighted. If there are too many states to fit in the column vertically, I want to add a scroll bar to the state column. < ...

jqueryhtmlajax