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"
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
height
esempio
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
Il pacchetto zip allegato contiene tutti i file degli esempi visti nel corso dell'articolo.
