PROGRAMMIAMO
HTML - Centrare gli elementi
Il problema della centratura

Uno dei problemi con cui si scontra spesso il progettista di una pagina web è quello di centrare un elemento: per esempio centrare orizzontalmente una tabella in una pagina. Un tempo questo problema veniva affrontato con l'uso del tag <center> il quale però è attualmente deprecato. Ci sono soluzioni alternative che prevedono l'uso dei fogli stile e che esamineremo brevemente qui nel seguito.

Centrare orizzontalmente rispetto al contenitore

Supponiamo di voler centrare una tabella orizzontalmente. Abbiamo dunque un elemento <table> il quale dev'essere centrato orizzontalmente rispetto all'elemento che lo contiene (es. un <div> oppure il <body> della pagina). La centratura avviene infatti sempre rispetto all'elemento contenitore: in altre parole se il contenitore è un box per esempio allineato a sinistra, la centratura verrà fatta all'interno di tale box e non con riferimento a tutta la pagina.

Tornando al nostro esempio, la centratura orizzontale può essere effettuata molto semplicemente applicando lo stile seguente all'elemento da centrare:

<table border="1" style="margin: 0 auto; width: 60%">
...
</table>

I margini sinistro e destro vengono specificati come auto (automatic): ciò significa che il browser imposta automaticamente i loro valori uguali e pari al 50% dell'elemento contenitore. In pratica ciò fa centrare orizzontalmente l'elemento rispetto al suo contenitore.

Si faccia attenzione alla necessità di specificare l'attributo width (in percentuale o in assoluto) per l'elemento da centrare: in caso contrario infatti spesso le dimensioni di default dell'elemento sono pari all'intero contenitore (100%) e dunque la centratura risulta impossibile.

 

Centrare orizzontalmente le immagini e gli altri elementi inline

Centrare un'immagine è leggermente più difficile in quanto essa è un elemento inline e non un elemento di blocco. Ciò significa che non può essere centrata autonomamente, perché gli elementi inline non possono essere posizionati liberamente.

Il trucco è quello di trasformare l'immagine in un elemento di blocco (con display:block) e quindi centrarla con la tecnica vista precedentemente:

<img src="pippo.jpg" alt="Pippo" style="display: block;margin:0 auto">

Un'altra possibilità per centrare gli elementi inline è quella di applicare lo stile text-align:center all'elemento contenitore:

<div style="text-align:center"><img src="pippo.jpg" alt="Pippo"> </div>

 

Centrare verticalmente

La centratura verticale di un elemento child rispetto al suo contenitore parent può essere ottenuta con l'applicazione degli stili nel modo seguente:

.parent { position: relative; }
.child { position: absolute; top: 50%; transform: translateY(-50%); }

Nello specifico:

Per comprendere come queste due indicazioni centrino un elemento in verticale, si osservi l'esempio seguente. Dapprima applichiamo solo top:50% e otteniamo il seguente risultato:

Centratura verticale

Ora invece osserviamo cosa succede quando applichiamo anche transform: translateY(-50%):

Centratura verticale

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it