Centrare verticalmente blocchi div con CSS2

Spread the love

Per centrare verticalmente un blocco testo, se questo è composto di una sola linea, è necessario specificare oltre all’altezza del contenitore div anche l’altezza della linea di testo e queste devono coincidere:

HTML

<div>blocco centrato verticalmente</div>

 

CSS

div
{
  height: 200px;
  line-height: 200px; /* <-- devi aggiungere questa */
  vertical-align: middle;
}

Per un testo multi riga, è sufficiente racchiuderlo in un ulteriore blocco span.

CSS

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; /* <-- regolare questo */
}

[Fonte: StackOverflow]

 

 

Lascia un commento

Your email address will not be published.