centreren van meerdere child div's lukt niet

[Anoniem: 408966]

Is het mogelijk om enkel met css en html een div te maken die child div's bevat. De child div's moeten worden gecentreerd terwijl ze met een variabel aantal (naar gelang de grote van het venster) naast elkaar komen te staan. Indien het venster te klein is om all de child div's te positioneren springen ze naar onder en wordt de container div groter van hoogte. Tenslotte hebben de child div's allemaal de zelfde hoogte en breedte.

Ik zit hier al een tijdje mijn hoofd op te breken, en ik vrees dat ik door de bomben het bos niet meer zie. Ik vind er niets van op google en ben een beetje ten einde raad.

[Anoniem: 296939]

Heb je ergens een voorbeeldje online staan?

[R4gnax]

Anoniem: 408966 schreef op maandag 18 februari 2013 @ 20:20:
Is het mogelijk om enkel met css en html een div te maken die child div's bevat. De child div's moeten worden gecentreerd terwijl ze met een variabel aantal (naar gelang de grote van het venster) naast elkaar komen te staan. Indien het venster te klein is om all de child div's te positioneren springen ze naar onder en wordt de container div groter van hoogte. Tenslotte hebben de child div's allemaal de zelfde hoogte en breedte.

Ik zit hier al een tijdje mijn hoofd op te breken, en ik vrees dat ik door de bomben het bos niet meer zie. Ik vind er niets van op google en ben een beetje ten einde raad.

HTML:

<ul class="list-tiled list-centered-tiled">
  <li>Inline-block</li>
  <li>to the rescue</li>
  <li>once again!</li>
</ul>

Cascading Stylesheet:

.list-tiled {
  font-size  : 0; /* Hide inter-spacing that would be visible otherwise */
  list-style : none outside;
  margin     : 0;
  padding    : 0;
}

.list-tiled > li
{
  background     : #000;
  color          : #fff;
  font-size      : 12px; /* Restore a working font-size */
  display        : inline-block;
  margin         : 0;
  padding        : 0;
  height         : 50px;
  width          : 100px;
  vertical-align : top;  /* Align the top edges of the blocks */
}

/* For IE < 8, emulate display: inline-block with 'layout' */
.list-tiled > li
{
  *display : inline;
  *zoom    : 1;
}

.list-centered-tiled {
  text-align : center;  
  width      : 100%;
}

Gewoon een kwestie van de juiste zoektermen en de juiste blogs. Dan was je deze truc al tegengekomen.

[ Voor 9% gewijzigd door R4gnax op 18-02-2013 22:07 ]

[_Erikje_]

http://codepen.io/anon/pen/BvAEK lijkt mij een stuk minder rotzooi dan hierboven: http://codepen.io/anon/pen/bEmus

[Bosmonster]

Die rotzooi doet er ook niet zo toe. Het gaat om display: inline-block en text-align center, meer niet.

In jouw voorbeeld is juist die float in z'n geheel niet nodig en zorgt er juist voor dat het niet gecentreerd is.

[ Voor 39% gewijzigd door Bosmonster op 18-02-2013 22:37 ]

[R4gnax]

_Erikje_ schreef op maandag 18 februari 2013 @ 22:25:
http://codepen.io/anon/pen/BvAEK lijkt mij een stuk minder rotzooi dan hierboven: http://codepen.io/anon/pen/bEmus

Misschien komt dat doordat jij een heel ander probleem aan het oplossen bent. De vraag is om met een vloeiende breedte om te gaan waarbij line-wrapping optreedt zodra e.e.a. niet meer past. In plaats daarvan kom jij aan zetten met een <div> met een vaste breedte.

Voortaan aub wat beter lezen voordat je gaat claimen dat iets 'rotzooi' geeft; het is namelijk zo ongeveer de enige manier om het door de TS gestelde specifieke probleem met enige mate van degelijkheid cross-browser opgelost te krijgen.

Bosmonster schreef op maandag 18 februari 2013 @ 22:35:
In jouw voorbeeld is juist die float in z'n geheel niet nodig en zorgt er juist voor dat het niet gecentreerd is.

Dat is nog het mooiste. Je neemt een ander probleem om op te gaan lossen, implementeert het nog fout ook en claimt dan dat zo ongeveer de enige mogelijke wel werkbare oplossing rotzooi is. WTF

[ Voor 22% gewijzigd door R4gnax op 18-02-2013 23:46 ]

[Anoniem: 408966]

R4gnax schreef op maandag 18 februari 2013 @ 22:03:
Gewoon een kwestie van de juiste zoektermen en de juiste blogs. Dan was je deze truc al tegengekomen.

Bedankt, dat is precies wat ik nodig had, Ik wist dat er een mogelijkheid bestond om dit te doen zonder gebruik te maken van javascript of dergelijke.

[Anoniem: 296939]

Anoniem: 408966 schreef op dinsdag 19 februari 2013 @ 11:01:
[...]


Bedankt, dat is precies wat ik nodig had, Ik wist dat er een mogelijkheid bestond om dit te doen zonder gebruik te maken van javascript of dergelijke.

Nee dat wist je niet

Uit de TS:

Anoniem: 408966 schreef op maandag 18 februari 2013 @ 20:20:
Is het mogelijk om enkel met css en html een div te maken die child div's bevat. De child div's moeten worden gecentreerd terwijl ze met een variabel aantal (naar gelang de grote van het venster) naast elkaar komen te staan. Indien het venster te klein is om all de child div's te positioneren springen ze naar onder en wordt de container div groter van hoogte. Tenslotte hebben de child div's allemaal de zelfde hoogte en breedte.

Ik zit hier al een tijdje mijn hoofd op te breken, en ik vrees dat ik door de bomben het bos niet meer zie. Ik vind er niets van op google en ben een beetje ten einde raad.

[Anoniem: 408966]

Maar als je al minesweeper kunt maken, met html en css alleen. Dan moest wat ik vroeg toch ook gaan. Alleen vond ik het niet.