float:center ??

[diwla]

Ciao a tutti,
ho bisogno di centrare dei div allinterno di un'altro div, ho provato con float:center ma non esiste...
Ecco un esempio del codice:
<div style="height:100px; overflow:hidden">
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
</div>

in pratica in questo modo se il div contenitore non ha spazio sufficiente a visualizzare tutti i div contenuti questi spariscono... solo che vorrei che quelli visualizzati fossero centrati...
come fare??

[firagaspell]

Molto semplice.

Come spesso accade nei CSS, quando non hai qualcosa utilizzi qualche stratagemma.

In questo caso immaginiamo che il div contenitore (id="principale") abbia 1000px di larghezza. il div contenuto (id="secondario") prenderà come larghezza quella del div "principale" e quindi 1000px. Se invece specifichi tu la larghezza attraverso CSS prenderà quella da te definita.

Se assegni al div "secondario" 400px e poi assegni al margine sinistro e destro del div 300px allora quello che succede è che il div "secondario" compare come centrato.

|--- 300px ---|--- 400px ---|--- 300px---|
totale 1000px

Quindi dovresti fare:

#secondario{
width: 400px;
margin: 0px 300px;
}

Si utilizza però questa regola:

#secondario{
width: 400px;
margin: auto;
}

In questo caso viene automaticamente usato il valore "0px 300px" perchè è il browser che lo calcola.
Ti consiglio di usare il metodo con "margin: auto;"

[diwla]

non credo che questa soluziona vada bene per me...
io ho un div contenitore con larghezza variabile, diciamo all'80%, all'interno del quale ho più div che devono venire affiancati tra loro visualizzando solo quelli che ci stanno nella larghezza del contenitore.

quindi se il div contenitore è largo 1000px ed all'interno ho 5 div da 300px il risultato che ho con il float:left è questo:
|--300px--|--300px--|--300px--|-100px-|
|--300px--|--300px--| <-- questi vengono nascosti con l'overflow hidden

se allargo la pagina ed il contenitore diventa di 1200px avrò automaticamente
|--300px--|--300px--|--300px--|--300px--|
|--300px--| <-- questo viene nascosto con l'overflow hidden

se invece lo stringo e diventa di 800px avrò
|--300px--|--300px--|-200px-|
|--300px--|--300px--|--300px--| <-- qusti vengono nascosti con l'overflow hidden

quello che vorrei ottenere è che vengano visualizzati solo i div che ci stanno lasciando il margine automatico ai lati:
|-50px-|--300px--|--300px--|--300px--|-50px-|
|--300px--|--300px--| <-- qusti vengono nascosti con l'overflow hidden

[diwla]

vediamo se adesso che sono finite le feste qualcuno mi sa rispondere...

[diwla]

aiutoooo
non ne vengo fuori...
qualcuno ha qualche suggerimento??
la mia esigenza è quella di mettere dei div affiancati tra loro allineati al centro!
aiutatemi!!!

[Mich_]

Originariamente inviato da diwla
aiutoooo
non ne vengo fuori...
qualcuno ha qualche suggerimento??
la mia esigenza è quella di mettere dei div affiancati tra loro allineati al centro!
aiutatemi!!!

Vedi se questo fa al caso tuo:

HTML:
<div id="contenitore">
  <div id="centrato">
    <div class="box">

contenuto 1</p></div>
    <div class="box">

contenuto 2</p></div>
    <div class="box">

contenuto 3</p></div>
    <div class="box">

contenuto 4</p></div>
    <div class="box">

contenuto 5</p></div>
    ...
  </div>
</div>


CSS:
#contenitore {
  width: ...;   /* necessario che la larghezza sia definita */
}
#centrato {
  margin: 0 auto;
}
#centrato:after {
  clear: left;
  ... vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float
}
.box {
  float: left;
}