Vertical text center in div

Question

Here you can show an example of my code : 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;}

How can i vertical center my text in the div progressBarText ?

score 1 · Accepted Answer · answered Jan 08 '14 at 21:08

1

add line-height to your text
try this:

.progressBarText{
       position:absolute;
       z-index:10;
       top:0;
       left:0; 
       width:100%; 
       line-height:15px; 
       text-align:left; 
       color: white; 
   }

DEMO

answered Jan 08 '14 at 21:08

Alessandro Minoccheri

32,975
19
110
159

oh yes, that was simple.. thanks ! – Clément Andraud Jan 08 '14 at 21:08
glad to help you :) @ClémentAndraud – Alessandro Minoccheri Jan 08 '14 at 21:10
This is simply an abuse of `line-height`. What if he had multiple lines of text. – crush Jan 08 '14 at 21:10
2

isn't necessary to downvote the right answer if your isn't the rght way but isn't ridiculous I think my answer @crush – Alessandro Minoccheri Jan 08 '14 at 21:11
1

@AlessandroMinoccheri Your answer isn't right. Try resizing the font, and see what happens to your "vertically centered" text. – crush Jan 08 '14 at 21:11
1

well the solution works fine for the OP example isn't specified that is a global solution for all existing font-size not? Well your downvote I repeat isn't necessary and your critic not constructive for this problem @crush – Alessandro Minoccheri Jan 08 '14 at 21:13
1

@AlessandroMinoccheri Your answer isn't right. Period. – crush Jan 08 '14 at 21:13
This is the important, the resolution of your problem :) @ClémentAndraud – Alessandro Minoccheri Jan 09 '14 at 07:46

Vertical text center in div

1 Answers1