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


i apologize in beforehand if duplicate can't seem find answer.

i made resembles progress bar. it's div p elements inside. can't seem center p elements vertically.

all did give parent div padding , logically text should in middle seems font counting height differently. , solution change line-height won't work. if change font verdana text aligned not 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

this should looking for. problem had fixed height of 20px on div. if change value 28px, 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>


Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

mapreduce - Resource manager does not transit to active state from standby -

serialization - Convert Any type in scala to Array[Byte] and back -