[CSS] Allineare 3 div al centro

Ciao a tutti.. ho un problema e nonostante abbia passato molto tempo a cercare in giro nel tentativo di trovare la soluzione (anche qui sul forum), non ci sono riuscito.
Il problema è il seguente:
Nella mia pagina web ho questo codice (CSS):

#container
		{
		padding:0%;
		line-height: 0%;
		margin-top: 5%;
		width: 70%;
		margin: 10%;
		}
.sin
	{
 margin:0%;
 padding:0%;
 width:20%;
 float:left;
 background-color: #00E100;
 text-align: right;
	}
.cen
	{
 margin:0%;
 padding:0%;
 width:20%;
 background-color: ##FFFFFF;
 text-align: center;
 float:left;
	}
.des
	{
 margin:0%;
 padding:0%;
 width:20%;
 background-color: #FF0000;
 float: left;
 text-align:left;
	}

E nel HTML è richiamato in questo modo:

...................
<div id="container">
			<div class="sin">
				<h2><a href="LINK"><p>TESTO</p></a> </h2>
			</div>
				<div class="cen">
					<h2><a href="LINK"><p>TESTO</p></a> </h2>
				</div>
					<div class="des">
						<h2><a href="LINK"><p>TESTO</p></a> </h2>
					</div>
</div>
...................

Io vorrei che questi div siano allineati al centro..
Ho fatto diversi tentativi tipo inserire nel CSS margin: 0 auto; ecc..
Ma nessuno funziona come voglio, sono riuscito a portarlo al centro impostando misure, ma non riesco a impostarlo precisamente al centro.

Potete aiutarmi?

PS: mi scuso con la community nel caso in cui una domanda del genere sia stata postata, ma io non sono riuscito a trovare ciò che cercavo.

[karl94]

La soluzione dipende da cosa cerchi esattamente. Ti serve metterli in modo tale che ognuno occupi esattamente un terzo della larghezza disponibile? O che l'intero blocco dei tre elementi venga centrato, a prescindere dalle larghezze individuali?

Io vorrei che ad ogni div potrei anche cambiare le misure, ma devono restare sempre al centro..

[karl94]

Allora l'unico modo è impostare la loro proprietà CSS display sul valore inline-block, così si comporteranno all'interno del div#container come se fossero tre lettere di un paragrafo di testo, ma mantenendo inalterata la loro capacità di essere dei contenitori.
Ci sono però un po' di cose da mettere a posto: dovrai anzitutto levare tutti i float, text-align e altre proprietà inutili che vedo; eliminare dal sorgente qualsiasi spazio intercorra tra i vari div#container > div (nel caso in cui non conosca questo selettore, identifica gli elementi div figli del div avente id container), poiché con il nuovo valore della proprietà display si comporteranno esattamente come se fossero i caratteri di un testo, mantenendo dunque qualsiasi spazio tu lasci indicato nel sorgente.
Infine qualche consiglio per il CSS: noto che spesso includi l'unità di misura (in questo caso la percentuale) anche quando il valore numerico è zero, sappi che in questi casi non è necessario specificarla, è sufficiente lo zero; nelle misure di lunghezza usi solamente la percentuale, questo può andar bene per le larghezze ma sei sicuro che non comporti problemi per i margini, specialmente quelli verticali? Vedo inoltre un colore indicato male, è preceduto da due simboli di cancelletto e, sempre riguardo i colori, puoi usare in diversi casi la sintassi abbreviata (#F00 anziché #FF0000).

Dimenticavo la cosa più importante: dovrai impostare l'allineamento del testo centrato sul div contenitore.

Ok.. grazie per i tuoi consigli :) ora vedrò di sistemare il tutto :)

Non mi risulta, magari non ho capito bene io.
Potresti abbozzarmi un codice per vedere dove sbaglio? :/

Ho provato con altre cose ma niente, non ottengo il risultato voluto.. se imposto le misure allora riesco a spostare il tutto ma a posizionarlo PERFETTAMENTE al centro no...
E' un lavoro per il sito della mia scuola, quindi se poteste aiutarmi ve ne sarei grato, magari pubblicando una bozza del codice e vedere dove sbaglio, magari anche spiegando perché quel comando.

Grazie :D

[karl94]

Per esempio:

<div id="contenitore"><div>Contenuto del primo <samp>div</samp></div><div>Contenuto del secondo <samp>div</samp></div><div>Contenuto del terzo <samp>div</samp></div></div>

#contenitore{
	text-align: center;
}

#contenitore > div{
	display: inline-block;
	width: 150px;
}

Funziona perfetto :) grazie mille.. devo dire che posso contare sempre su di voi :)

Ora imparerò meglio quel tipo di selettore #contenitore > div avevo letto più o meno ma non ho approfondito ;)

[karl94]

http://www.w3.org/TR/selectors/#child-combinators
Nel selettore A > B quel maggiore è semplicemente un combinatore che identifica un elemento B solo nel caso in cui sia figlio (figlio diretto, non banale discendente) dell'elemento A. Ovviamente gli "operandi" del combinatore possono essere anche selettori più complessi, come selettori di classe o identificatore, difatti nel selettore che hai citato il primo membro è un selettore che identifica un elemento non per il nome, ma per il valore dell'identificatore ad esso assegnato.

È più chiaro adesso?

Poco.. comunque ora do un occhiata, se o problemi non mi faro scrupoli a chiedere haha

Il mio codice per fare tutto questo in modo semplice è:

<div class="contenitore" style="width: 100%; text-align: center;" >
<div class="cella" style="display: inline-block; min-width: 80px; width: 25%; background-color: #EdE;" >1</div>
<div class="cella" style="display: inline-block; min-width: 80px; width: 25%; background-color: #EEE;" >2</div>
<div class="cella" style="display: inline-block; min-width: 80px; width: 25%; background-color: #EdE;" >3</div>
<div class="cella" style="display: inline-block; min-width: 80px; width: 25%; background-color: #EEE;" >4</div>
</div>

in questo esempio sai come ridimensioare le caselle ed il tutto è responsive
Max