1

Tem dois Exemplos um com PX e o outro com % mas nao sei fazer usando % o que coloco no tudo2 para ficar igual ao tudo1?

#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>

1 Resposta 1

1

No exemplo que vc montou para alinha o texto na vertical usando line-height em % vc vai ter que colocar a altura do line-height 3x maior que a altura do height do Pai.

Por exemplo: se o Pai tem height:100px e cada Filho tem height:50% da altura do Pai o line-height tem que ser 300% (3 x 100) para o texto fique alinhado na vertical.

No snippet abaixo coloquei alguns modelos com line-height em % para vc ver melhor.

#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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .