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:
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%.
Esempio 2: una galleria con miniature centrate
Ho preparato un secondo esempio in cui le miniature sono inserite in una galleria fluida di immagini. Partiamo dal codice HTML: in questo caso la galleria viene rappresentata con una lista di thumbnail:
<ul id="gallery">
<li><img src="sea.png" alt="immagine" title="mare"></li>
<li><img src="sunset.png" alt="immagine" title="tramonto"></li>
<!--seguono altre miniature.. -->
</ul>Per prima cosa vengono rimossi margini, padding e marcatore di default da lista e list-item:
ul#gallery, ul#gallery li
{
margin: 0; padding: 0;
list-style-type: none
}Dato che si userà la proprietà float per affiancare le diapositive, sarà necessario "contenerli" in modo che non influenzino eventuali elementi successivi alla galleria nell'HTML. Ho optato per la tecnica FnE di cui ho parlato nell'articolo Float: teoria e pratica. Ecco la regola:
ul#gallery{ float: left; width: 100% }A questo punto non ci resta che specificare le regole su list-item e immagini in maniera molto simile a quella dell'esempio precedente. Ecco le due regole:
ul#gallery li{
float: left; width: 150px; height: 150px;
line-height: 150px; text-align: center;
margin: 0 10px 10px 0;
background: url(bk.png) no-repeat center center
}
ul#gallery img{ vertical-align: middle }Ho riportato in grassetto le due dichiarazioni aggiuntive rispetto al primo esempio: i list-item vengono resi float e si attribuisce loro un margine destro e inferiore di 10 pixel. Ora non ci resta che sistemare le cose su Internet Explorer con il commento condizionale. Ecco le righe da inserire nella sezione head della pagina:
Il nostro esempio è così ultimato. Volendo disporre la pagina con ingrandimenti, basterà incorporare le immagini all'interno di link e magari adottare una soluzione del tipo LightBox, uno script abbastanza semplice da usare che consente di avere ingrandimenti a centro pagina.
Il pacchetto zip allegato contiene tutti i file degli esempi visti nel corso dell'articolo.
