Allineare verticalmente ed orizzontalmente un elemento con i CSS

Coloro i quali hanno creato, e creano, pagine con un layout fatto a tabelle, sperando che abbandonino al più presto questo metodo, si trovano un pò "sfasati" da questo punto di vista in quanto i CSS non offrono una sintassi simile a quella dell' html. In effetti basta scrivere all' interno di una cella, per avere una immagine, un testo ecc... il seguente codice per avere un allineamento verticale superiore, al centro oppure in basso:

<td valign="top" / "center" / "bottom">....</td>  

Adesso vedremo come poter ottenere lo stesso risultato con poco codice CSS. Poniamo il caso che si voglia centrare una riga di testo in un box, quando a questo è stata assegnata un' altezza; il codice che scriveremo è:

#container{
width:500px;
height:200px;
line-height:200px; 
margin:20px auto;  
padding:0; 
background:#8a9; 
color:#fff; 
font-weight:bold;
}  

Vediamo cosa abbiamo ottenuto in questa pagina di esempio. Avrete notato che nel codice scritto più su ci sono due dichiarazioni in grassetto. Quindi: per allineare verticalmente un testo in un box con delle dimensioni prestabilite, il valore di line-height deve essere uguale al valore di height; cioè l' altezza del box che contiene il testo. Ovviamente per centrare orizzontalmente lo stesso testo si deve scrivere: text-align:center;. In questo caso non l' ho dichiarato in quanto il div container lo "eredita" dal body. Potete vedere il codice sorgente della pagina di esempio.

Centrare in verticale con il posizionamento assoluto

In questo secondo esempio avremo lo stesso risultato, cioè l' allineamento verticale di un oggetto, ma con un altro metodo, vale a dire position:absolute. Si ponga il caso che si desidera avere un box più piccolo inscritto in un altro più grande. Il contenuto (box piccolo) verrà posizionato al centro rispetto al contenitore (box grande). Cominciamo a stabilire le dimensioni del box grande:

#container{
margin:20px auto; 
padding:0; 
position:relative; 
width:500px;  
height:500px; 
background:#8a9; 
} 

Da notare il codice in grassetto per quanto riguarda il posizionamento relativo del contenitore. Questo ci permetterà di avere un elemento posizionato in maniera assoluta al suo interno. Adesso vediamo il codice per il contenuto:

#container2{ 
position:absolute;
left:150px; 
top:150px; 
background:#fff; 
width:200px;
height:200px;
}  

Intenzionalmente ho dichiarato quasi tutto in grassetto le dichiarazioni del #container2 per mettere in evidenza quelli che sono gli attributi che ci daranno il posizionamento assoluto.

left:150px è la distanza dell'angolo superiore sinistro del contenuto rispetto al lato sinistro del contenitore;
top:150px rappresenta la distanza dell' angolo superiore sinistro del contenuto rispetto al lato superiore del contenitore.

Quindi per avere un elemento centrato verticalmente, non dobbiamo fare altro che dividere in 2 la differenza dell' altezza dell' elemento genitore (in questo caso #container) con l' altezza dell' elemento contenuto (#container2).
500 pixel - 200 pixel = 300 pixel;
300 pixel / 2 = 150 pixel. Di conseguenza 150 pixel è la distanza dell' angolo superiore sinistro del contenuto dal lato superiore del contenitore (top:150px;).
Stessa ed identica cosa per quanto riguarda la distanza dal lato sinistro. Si devono fare un pò di calcoli. Per rendere le idee più chiare, vediamo il file di esempio.

Centrare in orizzontale e verticale nella pagina

I due esempi che sono stati mostrati più su prevedevano la conoscenza delle dimensioni dell' elemento contenitore. Potrebbe anche capitare di voler posizionare un elemento in una pagina html, non sapendo le sue dimensioni. Un utente potrebbe avere una risoluzione di schermo pari ad 800 X 600; un altro 1024 x 768 ecc... Come fare allora, conoscendo le sole misure del contenuto?
Ci avvarremo del posizionamento assoluto e di margini negativi. Ecco il codice:

#container{ 
position:absolute;
top:50%; 
left:50%; 
width:500px;
height:200px; 
margin-left:-250px; 
margin-top: -100px; 
color:#fff; 
font-weight:bold;
padding:0; 
background:#8a9; 
}  

Come sempre, in grassetto le dichiarazioni di codice che ci interessano di più. Non conoscendo le dimensioni dell' elemento contenitore, (la finestra del browser in questo caso), diamo un posizionamento assoluto, per left e top, pari al 50% dello spazio che ha a disposizione l' elemento da posizionare. Nel precedente esempio non abbiamo usato i margini; in questo si. Infatti dichiareremo come distanza dal margine dal lato sinistro e dall' alto, una misura negativa pari alla metà della larghezza e dell' altezza del box:
margin-left:-250px;
margin-top: -100px;
Se avessi dichiarato come margini due valori positivi, il #container si sarebbe spostato completamente nella parte bassa e verso destra nel browser. Ecco spiegato, quindi, il motivo di avere i margini con valori negativi. Questo ci consente di avere il #container centrato perfettamente sia in verticale che in orizzontale; possiamo vedere il risultato nella pagina di esempio.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati