centrare griglia immagini

[lella69]

Ciao a tutti.
CSS è davvero complicato per me ... sono ore che cerco e che provo a centrare una griglia di immagini senza riuscirci ....

qualcuno potrebbe darmi una mano ?
mi rimane sempre sulla sinistra dello schermo.
mi occorre con dimensione 100% perché se metto la misura in px quando la riduco le immagini non vanno una sotto l'altra ma rimangono allineate in orizzontale.

vi posto il codice e la pagina di prova

--------------------------------------------------------------

<style type="text/css">


#main {
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}


.affianca {
float:left;
}

.affianca img {
width:250px;
}


</style>



<div id="main">


<div class="affianca">
<img src="images/collezione1.jpg"><br>
<img src="images/collezione5.jpg"><br>
<img src="images/collezione9.jpg">
</div>


<div class="affianca">
<img src="images/collezione2.jpg"><br>
<img src="images/collezione6.jpg"><br>
<img src="images/collezione10.jpg">
</div>


<div class="affianca">
<img src="images/collezione3.jpg"><br>
<img src="images/collezione7.jpg"><br>
<img src="images/collezione11.jpg">
</div>


<div class="affianca">
<img src="images/collezione4.jpg"><br>
<img src="images/collezione8.jpg"><br>
<img src="images/collezione12.jpg">
</div>


</div>

--------------------------------------------------------------

http://www.mauweb.com/prova.asp

[stoneweb]

Prova così: aggiungi un div che contenga #main e chiamalo tipo #container poi dai questo CSS ai due elementi:

#container {
width: 100%;
}
#main {
display: table;
text-align: center;
margin: 0 auto;
}

[lella69]

Prova così: aggiungi un div che contenga #main e chiamalo tipo #container poi dai questo CSS ai due elementi:

#container {
width: 100%;
}
#main {
display: table;
text-align: center;
margin: 0 auto;
}

grazie mille stoneweb adesso è centrato a schermo intero ma se riduco la pagina si sposta sempre sulla sinistra

[stoneweb]

Sì, in effetti hai ragione. Se hai bisogno che siano sempre divisi in 4 colonne dai un width: 25%; ai div .affianca

[lella69]

Sì, in effetti hai ragione. Se hai bisogno che siano sempre divisi in 4 colonne dai un width: 25%; ai div .affianca

no è perfetto come è adesso e cioè che quando ristringo la pagina scali di tre, due, una colonna però volevo che rimanessero centrate le colonne

[stoneweb]

Ok vediamo se questo può andare bene:
Elimina il div#container che ti ho detto di aggiungere prima, quindi come CSS scrivi questo:

#main {
        text-align: center;
        margin: 0 auto;
        }




        .affianca {
            display: inline-block;
            margin: auto 1.5em;
        }

[lella69]

dopo ..... non so ..... forse 5/6 ore ? ....
funziona tutto ... grazie mille stoneweb ....

mi viene quasi da piangere !!!