pevere web css design accessibilità e usabilità 

Tecniche per centrare un box con css

Molto spesso incontriamo siti che si posizionano perfettamente al centro del nostro monitor indipendentemente dalla risoluzione e dalle dimensioni. Per fare questo abbiamo a nostra disposizione diverse tecniche con diversi pro o contro. La scelta ottimale la possiamo fare solo in base al tipo di risultato che vogliamo ottenere e soprattutto al tipo di compatibilità che vogliamo avere con browser antiquati.

#contenitore {
background-color: #FF0000;
width: 760px;
margin-left: auto;
margin-right: auto;
}

Una dichiarazione di questo tipo è ottimale, semplice, ma soprattutto perfettamente corretta in CSS2. Purtroppo però i browser che supportano completamente i CSS2 sono ancora pochi e quindi il nostro sito rischia di essere visualizzato in modo scorretto per la maggior parte dei nostri visitatori.

Potremmo usare allora qualche accorgimento aggiuntivo per aumentare la compatibilità.


body {
    text-align: center;
}
#contenitore {
background-color: #FF0000;
width: 760px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

Questa dichiarazione è “pura” ma purtroppo Internet Explorer 6 o inferiore non la supporta.
Il codice che segue è una soluzione “trucco” che permette di avere una buona compatibilità anche con browser datati.

#contenitore {
background-color: #FF0000;
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px;
}

Partendo dal presupposto che che le coordiante del box-model vengono impostate a 0 nel vertice superiore sinistro, con questa dichiarazione impostiamo un posizionamento assoluto del box-model portando il suo “punto 0”, ovvero il vertice sinistro al 50% della nostra pagina e, conosciuta la larghezza, imposteremo un margine sinistro negativo pari alla metà della larghezza effettiva.

Aggiungi il Tuo Commento:





Inviando questa risposta dichiaro di aver letto ed approvato le condizioni di utilizzo di questo sito web.

(*) = campo obbligatorio.

Condizioni di Utilizzo

1 - Tutte le risposte inviate a questo sito saranno sottoposte a moderazione manuale da parte dell'amministratore al fine di evitare il fenomeno detto "SPAM".

2 - Tutti i dati inseriti nel modulo di risposta verranno pubblicati in questa pagina ad eccezione dell'e-mail. Tale informazione viene richiesta ed archiviata dagli amministratori al fine di scoraggiare un utilizzo non consono del blog.

3 - Non utilizzare le risposte per pubblicizzare il tuo sito web. Tale tentativo verrà cancellato dall'amministratore. In ogni caso ai link inseriti nelle risposte viene applicato il "nofollow" per cui non ti portano vantaggi.