CODEWITHSUNDEEP
css
Emric Månsson
Emric Månsson

Reputation: 513

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

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>

enter image description here

Upvotes: 0

Views: 243

Answers (2)

Yash Jain
Yash Jain

Reputation: 1

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>

Upvotes: 1

rmarif
rmarif

Reputation: 548

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>

Upvotes: 1

Related Questions