Afbeeldingen centreren in div

[Verwijderd]

Ik ben bezig met een portfolio site nu loop ik alleen tegen een probleem aan met het centreren van de afbeeldingen.
Het gaat om een div die een width heeft van 100%, op elke resolutie pakt het dus de totale breedte van het browser venster.
Één enkele afbeelding in het midden zetten lukt nog wel maar zodra ik meer afbeeldingen wil gaat het fout.
De bedoeling is een soort "grid", dus 3 a 4 afbeeldingen naast elkaar en dan weer een rij eronder.
Tussen de afbeeldingen moet een wit ruimte komen.

Heb hier alle bestanden even geupload:
http://mrkwkns.site44.com/

Hoe zorg ik er nou voor dat mijn afbeeldingen in het midden staan?

[Cyphax]

Als het je met één afbeelding is gelukt, dan moet het met één div ook wel lukken. Zet in die div vervolgens je afbeeldingen, dan moet het lukken toch?

[Nedra]

Als je 't in een grid wilt stoppen zijn er verschillende technieken. Als het niet geheel vloeiend hoeft te zijn kan je de afbeeldingen in een container met vaste breedte stoppen en die margin:0 auto geven. Maar er zijn vele wegen naar rome, Google eens CSS Grid en je komt talloze voorbeelden en frameworks tegen. Kijk eens hoe ze het daar hebben gedaan.

[Verwijderd]

Als ik een container gebruik werkt mijn jquery script dan nog?
Ik zit namelijk vast aan deze volgorde:

code:

            <div class="block">
                <a href="#" class="zoom" id="blue"><img src="img/thumbnail-1.jpg" alt="thumbnail" /></a>
            </div>

[Nedra]

ik zou niet weten waarom niet? Met die hoverzoom target je alleen de <a class / ID van de blokken, dat heeft verder niets te maken met hoeveel elementen er nog in zitten. Overigens denk ik dat je dat effect ook in css zou kunnen bereiken

[incaz]

Ik denk dat .block {display: inline-block;} in combinatie met .container {text-align: center;} ook goed voldoet.
Je hebt dan geen float meer nodig.

[ Voor 13% gewijzigd door incaz op 13-05-2013 19:15 ]

[_Thanatos_]

inline-block (zoals incaz hierboven zegt) zou ook mijn eerste keuze zijn. Maar als IE7 nog ondersteund moet wordn, is dit geen optie. Gezien het hier gaat om afbeeldingen, kun je ze vgs mij ook prima een display:inline geven (wat default is, dus weglaten doet hetzelfde) en dan nog steeds text-align:center op de parent (die wel block is).

Het ligt er een beetje aan wat je verder nog wil met die afbeeldingen. Een onderschriftje eronder wordt al gauw lastig, dan moet je toch weer terug naar inline-block en dus IE8+.

Als de afbeeldingen een vaste of voorspelbare breedte hebben, weet je dus ook de breedte van de container, en dan wordt centeren ineens heel makkelijk. Met een vaste breedte + linker- en rechtermarge op auto.

[ Voor 16% gewijzigd door _Thanatos_ op 13-05-2013 21:29 ]

[Verwijderd]

Een onderschrift is in dit geval niet nodig en de afbeeldingen hebben allemaal dezelfde afmetingen.
is ga even met display:block en text-align:center spelen, bedankt voor de tips.

[gitaarwerk]

Je kan ook even semantisch proberen te denken. Uiteindelijk kan je ook het volgende doen:

pseudocode:

code:

<div>
<ul>
<li><a><img></a></li>
<li><a><img></a></li>
</ul>
</div>

Je zou de ul een scope kunnen geven met een display: block en breedte dus. de ul kun je dan uitlijnen middels margin: 0 auto;

Overigens niet altijd even makkelijk om een ul in het midden uit te lijnen EN dynamisch te vullen. Alhoewel je blokken in ieder geval een vaste breedte hebben is dat wel iets makkelijker.


html5 kan in dit geval ook nog uitkomst bieden, semantisch wat mooier, maar je zit natuurlijk met je browser compatilibiteit.

[ Voor 3% gewijzigd door gitaarwerk op 14-05-2013 11:20 ]

[R4gnax]

_Thanatos_ schreef op maandag 13 mei 2013 @ 21:27:
Maar als IE7 nog ondersteund moet wordn, is dit geen optie.

Oh nee? Wat dacht je van:

Cascading Stylesheet:

.foo {
  display  : inline-block;
  *display : inline;
  *zoom    : 1;
}

[_Thanatos_]

R4gnax schreef op dinsdag 14 mei 2013 @ 12:59:
[...]


Oh nee? Wat dacht je van:

Cascading Stylesheet:

.foo {
  display  : inline-block;
  *display : inline;
  *zoom    : 1;
}

Ja dat werkt totdat er iets bijkomt dat echt niet gaat met een display:inline. Maar hacks moeten een laatste redmiddel zijn en als vuistregel houd ik aan om ze *altijd* te vermijden. Ik gebruik dan nog liever een aparte css in een conditional comment, maar het display:inline probleem blijft dan.

[Fish]

alle afbeeldingen in een eigen div en die centreren

div.pics {
margin-left: auto;
margin-right: auto;
width: 960px;
}

elke pic in een div doen krijg je met margin wat ruimte dach ik zo

[ Voor 20% gewijzigd door Fish op 15-05-2013 02:34 ]

[R4gnax]

_Thanatos_ schreef op woensdag 15 mei 2013 @ 02:11:
[...]

Ja dat werkt totdat er iets bijkomt dat echt niet gaat met een display:inline. Maar hacks moeten een laatste redmiddel zijn en als vuistregel houd ik aan om ze *altijd* te vermijden. Ik gebruik dan nog liever een aparte css in een conditional comment, maar het display:inline probleem blijft dan.

Mag ik uit jouw opmerking opmaken dat je er niet mee bekend bent dat display:inline gecombineerd met zoom:1 (om het element 'layout' te geven) in IE6/7 hetzelfde werkt als display:inline-block in andere browsers?

[ Voor 8% gewijzigd door R4gnax op 15-05-2013 08:54 ]

[incaz]

@fish: als je elke afbeelding in een eigen div doet, komen ze onder elkaar te staan. Om ze naast elkaar te zetten heb je toch weer iets nodig als float, inline of inline-block.

Daarnaast worden ze niet gecentreerd, maar wordt de container gecentreerd. Binnen de container staan de afbeeldingen niet in het midden maar links. Dat maakt uit als de container zo breed is dat er net geen 4 (ofzo) afbeeldingen passen: je houdt dan een lege ruimte over aan de rechterkant.

[_Thanatos_]

R4gnax schreef op woensdag 15 mei 2013 @ 08:53:
[...]


Mag ik uit jouw opmerking opmaken dat je er niet mee bekend bent dat display:inline gecombineerd met zoom:1 (om het element 'layout' te geven) in IE6/7 hetzelfde werkt als display:inline-block in andere browsers?

Ik ben volledig op de hoogte van zoom:1, alleen jij maakt de aanname dat het i.c.m. display:inline precies hetzelfde doet, en dat is niet waar. Je gaat vroeg of laat tegen problemen aan lopen.

[R4gnax]

_Thanatos_ schreef op woensdag 15 mei 2013 @ 12:14:
[...]

Ik ben volledig op de hoogte van zoom:1, alleen jij maakt de aanname dat het i.c.m. display:inline precies hetzelfde doet, en dat is niet waar. Je gaat vroeg of laat tegen problemen aan lopen.

Ik heb nergens het woord 'precies' in de mond genomen. Ik heb gezegd dat een combinatie display:inline en zoom:1 voor IE6/7 hetzelfde werkt als display:inline-block voor andere browsers, daarbij bedoelende voor deze situatie (te weten; het probleem dat de TS omschrijft).

Ik weet ook wel dat er wat kleine verschillen zijn, bijv. in de context van het samenvallen van de marges met die van kind elementen (het zgn. 'collapsing margins') of het verticaal uitlijnen tov de basislijn van de tekst.

Jij doet alleen overkomen alsof inline-block gedrag totaal niet werkt omdat het bij het minste of geringste ploft. Helemaal door het voorbeeld van onderschriften onder de afbeeldingen te geven en dan te claimen dat je daarmee inline-block nodig hebt en dat dat scenario helemaal niet zou werken onder IE6/7. Sorry; maar dat is gewoon onzin.

Verticale uitlijning tov de basislijn van de tekst is geen probleem in een situatie waar je enkel blokken naast elkaar wilt uitlijnen. Als ze al in hoogte verschillen wil je ze waarschijnlijk allemaal netjes langs de boven- of onderkant uitlijnen en dat werkt in IE6/7 ook gewoon perfect. Het gedrag omtrend collapsing margins is heel eenvoudig te normaliseren door ook in andere browsers af te dwingen dat marges niet gaan samenvallen. (Dat is trouwens ook precies het gedrag is wat je met een zinnig opgebouwde layout voor een tiles tableau wil hebben.)

[_Thanatos_]

Punt is wel dat je een hack voorstelt. En een hack is per definitie onstabiel. Sorry dat je mijn opmerkingen onzin noemt, dat vind ik jammer, want ik weet behoorlijk goed waar ik het over heb. Ik werk al jaren als front-ender, en ik heb m'n graantje IE6-hacks wel gezien (en gemaakt). Stuk voor stuk zorgden ze ervoor dat alles in steen gebijteld werd, omdat alles steeds omviel met de minst of gringe aanpassing. Plus dat het na verloop van tijd veel (en onnodige) belast meedraagt, want niemand durft ze weg te halen. De nette code blijft (zelfs na jaren) van browser tot browser gewoon werken, omdat het code is die werkt zoals het hoort te werken, en geschreven is zoals het geschreven hoort te worden. Dat soort dingen gaan niet kapot.

Hoe je het ook wend of keert, het is in de aard van een CSS-hack dat ie vroeg of laat of een willekeurig moment kan stoppen met werken, en dat kan door een update aan die oude browser of door een wijziging aan je code die er niets mee te maken lijkt te hebben.

Een CSS-hack moet een *allerlaatste* redmiddel zijn. En nee, "valid code" getuigt nog niet van de afwezigheid van hacks, just so you know. Gewoon opassen ermee, je graaft immers een kuil voor niemand minder dan jezelf.

[ Voor 9% gewijzigd door _Thanatos_ op 21-05-2013 02:05 ]

[R4gnax]

_Thanatos_ schreef op dinsdag 21 mei 2013 @ 02:03:
Punt is wel dat je een hack voorstelt. En een hack is per definitie onstabiel. Sorry dat je mijn opmerkingen onzin noemt, dat vind ik jammer, want ik weet behoorlijk goed waar ik het over heb. Ik werk al jaren als front-ender, en ik heb m'n graantje IE6-hacks wel gezien (en gemaakt). Stuk voor stuk zorgden ze ervoor dat alles in steen gebijteld werd, omdat alles steeds omviel met de minst of gringe aanpassing. Plus dat het na verloop van tijd veel (en onnodige) belast meedraagt, want niemand durft ze weg te halen. De nette code blijft (zelfs na jaren) van browser tot browser gewoon werken, omdat het code is die werkt zoals het hoort te werken, en geschreven is zoals het geschreven hoort te worden. Dat soort dingen gaan niet kapot.

Het toeval wil dat ik dus ook al een aantal jaren als 'front-ender' werk. Mijn ervaring is juist dat alle gezeik rondom het clearen van floats en ongein zoals de double-left margin bug in IE6 voor een stuk meer troep zorgt dan een goed begrepen systeem zoals inline-block werkend krijgen in IE6/7.

Uiteraard is die star hack alleen om even snel een voorbeeld te illustreren. Ik zou in CSS die uiteindelijk naar productie gaat een Modernizr test gebruiken die het bestaan v/d 'hasLayout' property controleeert.

_Thanatos_ schreef op dinsdag 21 mei 2013 @ 02:03:
Hoe je het ook wend of keert, het is in de aard van een CSS-hack dat ie vroeg of laat of een willekeurig moment kan stoppen met werken, en dat kan door een update aan die oude browser of door een wijziging aan je code die er niets mee te maken lijkt te hebben.

Een CSS-hack moet een *allerlaatste* redmiddel zijn. En nee, "valid code" getuigt nog niet van de afwezigheid van hacks, just so you know. Gewoon opassen ermee, je graaft immers een kuil voor niemand minder dan jezelf.

Het is geen hack. Het is hoe IE6 en 7 inline-block implementeren. Het enige wat display: inline-block in IE6 en 7 doet is een element layout geven. Het werkt ook meteen goed op elementen die van nature al een display: inline hebben, zoals bijv. span. Enkel voor elementen die standaard een ander display type hebben heb je deze 'hack' nodig om ze eerst inline te maken en dan een andere trigger te gebruiken om ze layout te geven.

Het kan toch niet zijn dat je al jaren als front-ender meedraait en dan nog geen kaas gegeten van hoe het layout systeem in IE6/7 zich gedraagt. Dan heb je jezelf gewoon nooit echt in de relevante materie verdiept. Nou ja; het kan wel; da's het aloude verhaaltje van '5x 1 jaar ervaring' vs. '5 jaar ervaring', maar ik mag hopen dat dat hier toch niet het geval is...

Maar goed; laat even weten wanneer Microsoft een ingrijpende wijziging in IE6/7 gaat doen die de layout engine op z'n kop gooit. Die dag moet ik namelijk even oppassen voor neervallende stront van vliegende varkens.