Meerdere images centreren

[Ambianz]

Ben bezig met een projectje, hiervoor wil ik graag 2 rijen van 4 images centreren, elke rij staat in een div, de 2 rijen staan ook in een div met 75% width, hieromheen staat een div met 100% omdat deze horizontale balk een bg heeft.

HTML:

<div class="rowcircle">
        <div class="rowcirclesmall">
            <div class="circlewrapper1">
            
                        <a href="#"><img class="pic" src="img/circle1.png" alt="Img1"></a>
        
                        <a href="#"><img class="pic" src="img/circle2.png" alt="Img2"></a>
            
                        <a href="#"><img class="pic" src="img/circle5.png" alt="Img3"></a>
                
                        <a href="#"><img class="pic" src="img/circle6.png" alt="Img4"></a>
            </div>
            
        
            <div class="circlewrapper2">
                
                        <a href="#"><img class="pic" src="img/circle4.png" alt="Img5"></a>
                
                        <a href="#"><img class="pic" src="img/circle5.png" alt="Img6"></a>
                
                        <a href="#"><img class="pic" src="img/circle7.png" alt="Img7"></a>
                    
                        <a href="#"><img class="pic" src="img/circle8.png" alt="Img8"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Cascading Stylesheet:

.circlewrapper1 {
    width: 75%;
    margin: 0 auto;
}

.circlewrapper2 {
    width: 75%;
    margin: 0 auto;
}

.rowcirclesmall {
    width: 100%;
    margin: 0 auto;
}

.pic {
    height: 18%;
    width: 18%;
    margin: 35px 25px;
    float: left;
    filter: grey;
    -webkit-filter: grayscale(100%);
}

.pic:hover {
    filter: none;
    -webkit-filter: none;
}

Iemand die mij wat tips kan geven om weer op weg te gaan?

Probleem is dus dat de 4 afbeeldingen niet gecentreerd worden..

[Nivali]

Hiermee moet het wel lukken.
http://css-tricks.com/centering-in-the-unknown/

[Ambianz]

eea geprobeerd daarmee maar werkt nog niet..

[FotW]

Begin eens met het online zetten van een testcase in bijvoorbeeld JSFiddle, want mijn glazen bol start niet op vandaag

[Zoefff]

Volgens mij moet je een hele andere benadering gebruiken. Heb je de .rowcirclesmall container alleen om een achtergrond in te tonen? Dan kan je de inhoud toch ook smaller maken met een padding? En als je de afbeeldingen gewoon inline toont kan je prima af met 'text-align: center' om ze te centreren.

Zoiets, waarbij het dus eigenlijk om CSS regel 3 en 4 gaat:

HTML:

<div>
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
</div>

Cascading Stylesheet:

div {
    border: 1px solid red;
    padding: 0 12.5%;
    text-align: center;
}

img {
    background: blue;
    width: 40px;
    height: 40px;
}

[_Thanatos_]

display:inline-block op de images of de links eromheen (maakt geen zak uit eigenlijk), en dan op de container text-align:center. Klaar

/edit
Ohja, en dan dus niet floaten.

[ Voor 13% gewijzigd door _Thanatos_ op 10-01-2014 13:18 ]

[NMe]

Images zijn al inline, dus die inline-block is niet eens nodig.

[Zoefff]

En als je dat weglaat heb je precies herhaald wat ik al in het voorbeeld heb uitgeschreven. Bravo

[_Thanatos_]

NMe schreef op vrijdag 10 januari 2014 @ 19:34:
Images zijn al inline, dus die inline-block is niet eens nodig.

Dat is waar ja
Maar met inline-block haal je de "spookmarge" dacht ik ook weg die inline elementen om zich heen hebben als er in de source whitespace omheen zit.

Niet essentieel voor de oplossing inderdaad. Otoh, wel essentieel als je naast images ook andere elementen in dezelfde view wil kunnen gebruiken zoals <iframe> of <video>.