Skip to content

Centrare un box nella pagina

venerdì 29 giugno , 2007
by

Centrare orizzontalmente un oggetto nella pagina è semplice, ma centrarlo ANCHE verticalmente puo’ essere un problema.

La soluzione? Trucco css.

cubo.jpg

Condizioni: è necessario conoscere le dimensioni del box a priori.

Codice xhtml (strict 1.0):

<div id="centrato">
    Testo contenuto nel box.
  </div>

Codice css:

div.centrato {
height:330px;
width:450px;

position:absolute;
top:50%;
left:50%;
margin:-175px 0px 0px -225px;

}

Discutiamolo.
Dapprima si danno le dimensioni del box (450×330), quindi lo si sottare al normale flusso del documento (position:absolute).
Ora impostiamo la distanza da top e left in percentuale, per avere lo stesso risultato con ogni risoluzione e schermo.
Il margine dovrà essere ora impostato così:
margin-top: la metà dell’ altezza;
margin-left: la metà della larghezza;

Voilà

No comments yet

Lascia un commento

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: