margin:0 auto;

**BaRaTTaMi** · 07-08-2008, 20:11

mi potete spiegare a cosa serve questo codice inserito dentro un div nel css ??

codice:

margin:0 auto;

grazie in anticipo

**Sky** · 08-08-2008, 00:34

Annulla i margini inferiori e superiori e lo imposta su "automatico" ad entrambi i lati, così che i browser allineino al centro il box.

Ciao :)

**BaRaTTaMi** · 08-08-2008, 11:29

ed è consigliabile metterlo vero ?? perchè ho sentito dire che con questo codice i div non si sovrappongono ... è vero ?

**Sky** · 08-08-2008, 21:43

Non capisco cosa intendi per "sovrapporsi", comunque è una tecnica molto usata per posizionare al centro un elemento block-livel (quali div, form, ecc.).

**BaRaTTaMi** · 08-08-2008, 21:49

ahn ok .. ora ho capito.

è meglio inserirlo nel container o nei div??

**Sky** · 09-08-2008, 03:37

Va applicato all'elemento da centrare

Mentre nel suo contenitore è bene applicare la proprietà text-align: center, altrimenti una precedente versione di IE non posizionerebbe al centro l'elemento. Basterà poi annullarla impostando ad esso (e a eventuali altri elementi presenti nel container) la stessa proprietà text-align, questa volta impostata su "left".

**BaRaTTaMi** · 09-08-2008, 13:08

quindi se io volessi impostare al centro solo un div, basta che metto il margin:0 auto al div ...
invece se voglio impostare il container al centro, metto text-align:center ...

??

e il float:left; a cosa serve?

**Sky** · 09-08-2008, 13:41

No, c'è un po' di confusione: il margin: 0 auto; centra l'elemento a cui viene applicato. Se vuoi applicarlo sia al div che al container, devi darlo ad entrambi.
Il text-align: center invece serve per risolvere un bug di Internet Explorer e va applicato a chi contiene l'elemento da centrare. Vediamo due esempi partendo dal medesimo codice HTML:

codice:

<body>
  <div id="container">
    <div id="centrato"></div>
  </div>
</body>

Se desideriamo posizionare al centro <div id="centrato"></div> (relativamente alla dimensione di #container), faremo così:

#container {
text-align: center;
}
#centrato {
margin: 0 auto;
text-align: left; /* Annulliamo il precedente text-align*/
}

Se desideriamo centrare anche il #container, il css diventerà così:

body {
text-align: center; /* il contenitore di #container è il tag body */
}
#container {
margin: 0 auto;
}
#centrato {
margin: 0 auto;
text-align: left; /* Annulliamo il precedente text-align*/
}

Il float serve invece per allineare un box a destra o a sinistra, svincolandolo parzialmente dal flusso degli elementi della pagina (ossia dall'ordine in cui sono inseriti). Per capire meglio questo concetto ti consiglio di seguire la guida di html.it sui css :)

**BaRaTTaMi** · 09-08-2008, 14:01

un po ho capito

...

comunque faccio prima a chiederti: faccio giusto a scrivere cosi o è sbagliato??

codice:

html,body 

{
     margin:0;
     padding:0;
}
		  
 body
{
     font:100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
     background:#00FF00;
     color:#555;
}

 div#container
{
     width:100%;
     height:40px;
     margin:0 auto;
     background: url(immagine.jpg)
     repeat-x;
}

 div#container1
{
     width:950px;
     margin:0 auto;
     background:#FFFF99;
     repeat-x;
}

 div.left
{
     position:absolute;
     background:#CCCCCC;  
     repeat-x;
}

 div.right
{
     background:#CC9900;
}

dove il container sta x lo sfodno a tutta pagina (100%), e il container1 l'ho messo per centrare i due div per una larghezza indicata di 950px

è giusto scritto cosi o devo aggiungere text-align:center o altre cose ??

**Sky** · 09-08-2008, 15:08

Mmm, andrebbe rivisto molto quel foglio di stile, è un po' confuso. Parti da una serie di layout di esempio (http://css.html.it/guide/leggi/3/gui...iti-con-i-css/) e modificali in base alle tue esigenze :)

Discussione: margin:0 auto;

Strumenti discussione

Ricerca discussione

Visualizza

margin:0 auto;

Permessi di invio