CSS  »  Articoli  »  Effetti con CSS 

La centratura con i CSS è spesso una cosa difficile da ottenere, soprattutto se si tratta di centratura verticale. In questo articolo vedremo come sia possibile centrare sia verticalmente che orizzontalmente immagini (e in particolare miniature) all'interno di una "cornice". Cominciamo subito.

Esempio 1: centrare immagini all'interno di un div

Vediamo subito il primo esempio: si tratta di due div con una cornice grafica in cui sono centrate due miniature, una con orientamento verticale e una con orientamento orizzontale. Vediamo l'HTML: ciascuna delle due immagini è contenuta dentro un div con class="pic":

<div class="pic"><img src="sea.png" alt="immagine" title="mare"></div>
<div class="pic"><img src="sunset.png" alt="immagine" title="tramonto"></div> 

È importante che all'interno dei due div le immagini siano inserite senza spazi, ovvero nella loro stessa riga. Ora vediamo l'immagine di sfondo che fa da cornice:

Figura 1 - Immagine di sfondo

Si tratta di un'immagine di 150x150 pixel, grande abbastanza da contenere sia le miniature orizzontali che quelle verticali. Ora il CSS. Ecco le due regole necessarie:

div.pic{
  width: 150px; height: 150px;
  line-height: 150px; text-align: center;
  background: url(bk.png) no-repeat center center
}

div.pic img { vertical-align: middle } 

Nella prima regola si specificano per i div con class="pic" larghezza e altezza, altezza di linea pari all'altezza del div (ovvero 150px), allineamento del testo centrato e immagine di sfondo. La seconda regola serve per centrare verticalmente l'immagine attraverso la proprietà vertical-align.

Con il CSS appena visto si ottiene la centratura sia orizzontale che verticale su Opera, Firefox e Safari. Risulta ancora qualche problema con Internet Explorer: questo browser ha bisogno infatti di una dichiarazione sul font-size che dovrà essere pari all'altezza del div e del line-height. Con questa aggiunta, purtroppo, si perde la centratura verticale sugli altri browser. La soluzione è quindi usare un commento condizionale, così da poter specificare una regola CSS solo per IE.

Nella sezione head della pagina si inserirà quindi un commento condizionale con una regola CSS specifica per IE all'interno di un blocco style:

<!--[if IE]>

<style type="text/css"> div.pic{font-size: 150px;height: auto} </style>

<![endif]-->

Solo per IE viene quindi specificato un font-size di 150px e si annulla la dichiarazione sull'altezza dei div che contengono le miniature, impostando la proprietà height sul valore "auto". Il nostro esempio è così ultimato e funziona ora anche su Internet Explorer 5.5, 6 e la beta 2 di IE7 oltre che su Opera, Firefox e Safari. Non c'è modo di sistemare le cose su IE 5.0, ma questo browser detiene una percentuale di utenza veramente minima, inferiore al 3%.

Altri articoli

Altre guide

Altre newsletter