Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook 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: , ,  

Twitter