Fare internet – il blog di webtocom.com

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su FriendFeed Seguici su Twitter      Iscrivita ai nostri Feed      Mandaci una mail

Centrare un box con i css

Scritto da Fare-internet il 15 gennaio 2010 condividi condividi

Vediamo come è possibile cenrtare orizzontalmente e verticalmente un box con l’utilizzo dei css.
In questo esempio utilizzeremo il tag div e una classe css, niente ci vieta di utilizzare un altro tag che abbia display block e magari definire invece di una classe in id css. In ogni caso a livello logico se stiamo definendo un box il tag opportuno dovrebbe essere il div

Per prima cosa definiamo l’HTML

<div class="elementoCentrato"></div>


Ora supponiamo che il box debba essere largo 400px e alto 400px, il bordo di un pixel e un padding su ciascun lato di 5px.
Per ottere il risultato desidarato la classe da definire tramite fogli di stile è

.elementoCentrato{
        position:fixed;
        width:400px;
        height:400px;
        border:1px solid #000;
        background-color:#FFFFFF;
        padding:5px;
        top:50%;
        left:50%;
        margin:-206px 0 0206px;
}

In parole povere per centrare il box basta assegnare le dimensioni, eventuali bordi e eventuale padding, definire le proprietà css

top:50%;
left:50%;

e successivamente assegnare un margine superiore e sinistro negativo il cui valore è dato da:

Margine superiore: (altezza box + padding superiore + padding inferiore + bordo superiore + bordo inferiore) / 2
Margine sinistro: (larghezza box + padding sinistro + padding destro + bordo sinistro + bordo destro) / 2

Se per i bordi e per i padding sono uguali le coppie (sinistro-destro) e (superiore inferiori) il box risulterà perfettamente centrato.

Tag: , ,  

I posti più popolari