How to vertically align text when font is calculating height differently?

Question

I apologize in beforehand if this is a duplicate but I can't seem to find an answer.

I made something that resembles a progress bar. It's a div with p elements inside. However I can't seem to center the p elements vertically.

All i did now was give the parent div some padding and logically the text should be in the middle but it seems like the font is counting the height differently. And so the solution to change the line-height won't work. If I change the font to Verdana the text is aligned but that is not a preferred solution.

Snippet:

 div { width: 90%; background-color: green; text-align: left; padding: 1.2%; border-radius: 5px; height: 20px; font-family: 'Hind Guntur', sans-serif; } p { font-size: 90%; display: inline; margin: 0; color: white; } 

 <link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> <div> <p>1</p> </div> 

Answer 1

check this

 div { width: 90%; background-color: green; text-align: left; padding: 1.2%; border-radius: 5px; height: 20px; font-family: 'Hind Guntur', sans-serif; } p { font-size: 90%; display: inline; margin: 0; color: white; vertical-align: middle; } 

 <link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> <div> <p>1</p> </div> 

Answer 2

This should be what you are looking for. Your problem was that you had a fixed height of 20px on the div . If you change that value to 28px , your text might vertical-align.

 div { width: 90%; background-color: green; text-align: left; padding: 1.2%; border-radius: 5px; height: 28px; font-family: 'Hind Guntur', sans-serif; } p { font-size: 90%; display: inline; margin: 0; color: white; } 

 <link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> <div> <p>1</p> </div>