centrare div in float dentro un altro div

[webbondo]

Ciao a tutti,

ho cercato sul forum ma non ho trovato una soluzione al mio problema.

Ho un div contenitore dove all'interno ci sono 4 div in float tra loro.

Come faccio a centrare questi div? Calcolando che potrei averne anche meno di 4?

Ho provato a dare al contenitore text-align:center ma ho letto che i div interni essendo in float non sentono questa impostazione.

Mi potete aiutare?

grazie

[Mich_]

La domanda presenta varie ambiguita`, per cui la risposta potrebbe essere non applicabile al problema specifico.

Anzitutto un blocco non si centra con il text-align (salvo in qualche vecchio IE5.5 e/o se si usa IE in modo retrocompatibile).

Provo a scrivere un

HTML:
<div id="contenitore">
  <div id="centrato">  
    <div class="flottato"> uno </div>
    <div class="flottato"> due </div>
    <div class="flottato"> tre </div>
    <div class="flottato"> qua </div>
  </div> 
</div> 

CSS:
#contenitore {
  width: 500px;      /* necessario definire la larghezza */
  background: pink;  /* gli sfondi sono solo per capire cosa succede - vanno lasciati per le prove */
}
#centrato {       
  margin: 0 auto;
  overflow: hidden;    /* "chiude" i float */
  background: red;
}
.flottato {
  float: left;
  width: ...;            /* non necessario, ma a volte aiuta */
  margin: 2px;     /* un po' di aria tra i blocchi - non serve, ma a me piace cosi` */
  background: green;
}

[webbondo]

ciao,

si esattamente quello che intendevo.

Solo che mi sono dimenticato una cosa che secondo me non mi permette di ottenere quello che voglio.

il tuo div centrato, per me è in position absolute...quindi anche applicando margin auto 0 non si centra.

c'è possibilità di far qualcosa?

grazie

[Mich_]

Per centrare gli oggetti in posizione assoluta il metodo e` diverso:

HTML:
<div id="contenitore">
  <div id="centrato">  
    <div class="flottato"> uno </div>
    <div class="flottato"> due </div>
    <div class="flottato"> tre </div>
    <div class="flottato"> qua </div>
  </div> 
</div> 

CSS:
#contenitore {
  width: 500px;        /* necessario definire la larghezza */
  position: relative;     /* oppure absolute - deve essere definito */
  background: pink;    /* gli sfondi sono solo per capire cosa succede - vanno lasciati per le prove */
}
#centrato {       
  position: absolute;
  width: 300px;           /* necessario! */
  left: 50%;
  margin-left: 150px;    /* la meta` di width */
  overflow: hidden;      /* "chiude" i float */
  background: red;
}
.flottato {
  float: left;
  width: ...;            /* non necessario, ma a volte aiuta */
  margin: 2px;         /* un po' di aria tra i blocchi - non serve, ma a me piace cosi` */
  background: green;
}

Comunque il posizionamento assoluto ha degli effetti collaterali, per cui e` sempre meglio non usarlo se non strettamente necessario. Sembra piu` semplice, ma in realta` e` una delle cose piu` complesse.
Tra i layout che si trovano in giro (alcuni sono citati tra i "link utili" del forum) sono pochissimi quelli che necessitano di posizionamenti.