Cum sa aliniezi textul vertical folosind CSS

Configurare noua (How To)

Situatie

Vrei sa aliniezi textul vertical intr-un element div.

Solutie

Pentru o singura linie de text se poate seta inaltimea liniei sa fie egala cu cea a elementului div.

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div> Lorem ipsum dolor sit amet. </div>

Pentru mai multe linii de text se poate folosi abordarea de mai jos:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Tip solutie

Permanent

Voteaza

(14 din 29 persoane apreciaza acest articol)

Despre Autor

Leave A Comment?