Piemonte Lab

Esperienze di programmazione

centrare in orizzontale e verticale un'immagine all'interno di un div con css

Un problema che si presenta sovente nel web è quello di centrare verticalmente e orizzontalmente un'immagine all'interno di un div con dimensioni specifiche, senza però conoscere dimensioni né orientamento dell'immagine.

Questa operazione si può fare semplicemente mediante css:

Prima di tutto occorre rinchiudere l'immagine in tre div (questo per avere una soluzione totalmente cross browser), quindi avremo una struttura tipo:

<div id="esterno">

  <div id="mezzo">

    <div id="interno">

      <img />

    <div>

  <div>

<div>

 All'immagine occorre dare il percorso dell'immagine, sia essa orizzontale, verticale o quadrata è indifferente, essa rimarrà centrata in orizzontale e in verticale rispetto al div che abbiam chiamato 'esterno'.

Questo è invece il codice css:

#esterno{
 width: 150px; height: 100px; overflow: hidden; padding-right: 20px; padding-left: 20px; margin-top: 25px; float: left; position: relative;
}
#esterno img {
 max-height: 100px; max-width: 150px;
}
#mezzo {
 width: 150px; height: 100px; text-align: center; vertical-align: middle; display: block; position: absolute;
}
#interno {
 width: 150px; height: 100px; text-align: center; vertical-align: middle; display: table-cell;
}

In questo modo per esempio otterremo un div esterno con le sue caratteristiche (questo per esempio è flottante a sinistra e ha dei margini).

Avremo inoltre dei div interni con dimensioni fisse e un'immagine con dimensioni massime definite, in modo che indipendentemente da dimensioni e orientamento dell'immagine, questa risulterà sempre centrata rispetto al div esterno.