How to use line-height with percentage?

Question

How to use line-height with percentage?

Navigation

#1 by (1 votes)

1

There are two examples one with PX and the other with% but I do not know how to do it using% what I put in everything2 to be equal to everything1?

#tudo1{
  background: blue;
  width: 20%;
  height: 50px;
  margin-bottom: 30px;
}
#ma1{
  height: 25px;
  line-height: 25px;
}
#gira1{
  height: 25px;
  line-height: 25px;
  background: green; 
}

/*******************************/
#tudo2{
  background: blue;
  
  width: 20%;
  height: 50px;
  margin-bottom: 30px;
}
#ma2{
  height: 50%;
   /*line-height: ; o que coloco aq? 
  para ficar igual ao tudo1 afim de fazer
  a letra ficar centralizada verticalmente*/
}
#gira2{
  height: 50%;
  background: green; 
  /*line-height: ; o que coloco aq? 
  para ficar igual ao tudo1 afim de fazer
  a letra ficar centralizada verticalmente*/
}

<div id="tudo1">
 
  <div id="ma1">macaco</div>
  <div id="gira1">girafa</div>
</div>


<div id="tudo2">
 
  <div id="ma2">macaco</div>
  <div id="gira2">girafa</div>
  
</div>

html css

asked by anonymous 30.12.2017 / 13:42

1 answer

Problems to validate starting date greater than final Error '' unistd.h ': No such file or directory "with flex

score 1 · Answer 1

In the example you set up to align text vertically using line-height in% you will have to put the height of line-height 3x greater than the height of height of the Father.

For example: If Parent has height:100px and each child has height:50% of parent height line-height must be 300% (3 x 100) for text to be aligned vertically.

In the snippet below I put some models with line-height in% to see you better.

#tudo1{
  background: blue;
  width: 20%;
  height: 50px;
  margin-bottom: 30px;
}
#ma1{
  height: 25px;
  line-height: 25px;
}
#gira1{
  height: 25px;
  line-height: 25px;
  background: green; 
}

/*******************************/
#tudo2{
  background: blue;
  width: 20%;
  height: 50px;
  margin-bottom: 30px;
}
#ma2{
  height: 50%;
  line-height: 150%;
}
#gira2{
  height: 50%;
  background: green; 
  line-height: 150%;
}
/*******************************/
#tudo3{
  background: blue;
  width: 20%;
  height: 100px;
  margin-bottom: 30px;
}
#ma3{
  height: 50%;
  line-height: 300%;
}
#gira3{
  height: 50%;
  background: green; 
  line-height: 300%;
}
/*******************************/
#tudo4{
  background: blue;
  width: 20%;
  height: 200px;
  margin-bottom: 30px;
}
#ma4{
  height: 50%;
  line-height: 600%;
}
#gira4{
  height: 50%;
  background: green; 
  line-height: 600%;
}

<div id="tudo1">
  <div id="ma1">macaco</div>
  <div id="gira1">girafa</div>
</div>


<div id="tudo2">
  <div id="ma2">macaco</div>
  <div id="gira2">girafa</div>
</div>

<div id="tudo3">
  <div id="ma3">macaco</div>
  <div id="gira3">girafa</div>
</div>

<div id="tudo4">
  <div id="ma4">macaco</div>
  <div id="gira4">girafa</div>
</div>