Centrare DIV

[rdo]

Centrare DIV

Ciao!
Allora, ho creato una pagina dove tutto il contenuto (escluso h1 e footer) è contenuto in un div "Content". Come faccio a centrare il div?

Grazie mille!
Paolo

[paola.mi]

nel css metti
margin: auto;

[rdo]

Magica! Semplicissimo no? Basta saperlo...

Grazie mille!
paolo

[massy]

corretto... solo che IE se ne frega

quindi metti pure un bel text-align:center all'elemento che lo contiene

[paola.mi]

Massy... a me lo prende anche in IE... :bho:

[rdo]

E invece per centrare tutto il div anche in altezza come posso fare??
Grazie!

[massy]

http://www.constile.org/template/centrare_il_box/

[rdo]

@massy said:

http://www.constile.org/template/centrare_il_box/

Ho già provato a seguire quelle istruzioni ma mi posizione solamente l'angolo superiore sinistro a centro schermo... Non centra il tutto!
Forse perchè l'esempio è fatto con un box 350x200 invece il mio è 700x....
Può darsi? Cosa devo modificare nel css?

Grazie mille!

[laburno]

@rdo said:

Ho già provato a seguire quelle istruzioni ma mi posizione solamente l'angolo superiore sinistro a centro schermo... Non centra il tutto!
Forse perchè l'esempio è fatto con un box 350x200 invece il mio è 700x....
Può darsi? Cosa devo modificare nel css?

Grazie mille!

Devi cambiare il valore dei margini negativi in base alle dimensioni del tuo box.

A questo punto il box è posizionato in maniera tale da avere l'angolo superiore sinistro esattamente al centro della pagina. Se adesso si impostano il margine superiore e il margine sinistro su valori negativi, il box si sposterà verso l'alto e verso sinistra. Se il margine superiore è pari a metà dell'altezza del box (-100px) e il margine sinistro è pari a meta della larghezza del box (-175px), essendo tali valori relative all'angolo superiore sinistro, il box sarà al centro della pagina

[probid]

#div_da_centrare { 
             width : 600px;  /*La largezza del tuo div*/
             position: relative; /* questo va lasciato fisso */
             left: 50%; /* questo va lasciato fisso */
             margin-left: -300px;  /*metà della largezza del tuo div con un meno davanti*/
 }