[CSS] Div's naast elkaar horizontaal centreren

[RickyHeijnen]

Beste soortgenoten... ik zit de hele tijd al te klooien en te puzzelen maar ik kom er echt niet uit... heb jullie hulp nodig!

Ik heb een aantal divjes (het aantal is elke keer anders) van 150x150 pixels en deze wil naast elkaar weer geven en dan horizontaal gecentreerd over de pagina. Dmv AJAX haal ik het aantal op uit een php pagina en dat aantal divjes moet hij dan weergeven.

Voor zover is de enige oplossing die ik kan bedenken dmv javascript de 'left' berekenen en dan al die div's een eigen waarde meegeven. Maar mijn vraag is of het ook gewoon met CSS kan, want mij lukt het niet.

[Verwijderd]

Gewoon een wrapper om je zooitje divs heen wikkelen. Simpel gezegd kom je dan op zoiets uit:

Cascading Stylesheet:

#wrap { margin: 0 auto; /* alleen IE6 of hoger, maar daar streven we immers naar */
.box { float: left; width: 150px; height: 150px; }

HTML:

<div id="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Het kan ook door de body een text-align: center te geven, en zo IE5 de hemel in prijzen. Niet vergeten de wrapper een text-align: left; mee te geven voor de uiteindelijke inhoud.

[Clay]

De block en inline display types zijn hier eigenlijk niet geschikt voor. In IE in quirksmode zou je inline elementen met text-align:center op de parent alsnog 150x150 kunnen maken, maar echt elegant is dat niet. Iets met display:table en margin:auto werkt wel, maar niet in IE6 (of 7 wdbt).

[RickyHeijnen]

@Treador: Als ik dat doe, dan komen de divs niet in het midden, maar ze staan gewoon links in de div.

@Clay: Als ik text-align: center; toevoeg in de body dan begint de grote div precies op 50% van de pagina, dus de divjes komen wel netjes naast elkaar maar ze staan niet netjes horizontaal gecentreerd.

[Verwijderd]

Hmm.. uit m'n hoofd; niet getest. Maar het lijkt me nu inderdaad niet echt mogelijk.

Je zou de wrapper een vaste breedte mee kunnen geven, bijvoorbeeld 80%, dan centreert hij in ieder geval de wrapper. De boxjes krijg je met geen mogelijkheid gecentreert.. Het is zeker geen gelikte oplossing, maar dat hangt een beetje van je eisen af.

[Clay]

@Clay: Als ik text-align: center; toevoeg in de body dan begint de grote div precies op 50% van de pagina, dus de divjes komen wel netjes naast elkaar maar ze staan niet netjes horizontaal gecentreerd.

Dan doe je iets niet goed denk ik.
Dit werkt (zonder doctype!) in IE6, FF en blijkbaar ook Opera;

Cascading Stylesheet:

ul {
    display:table !important;
    display:block;
    text-align:center;
    margin:0 auto;
    border-spacing:2em 0;
}

li {
    display:table-cell !important;
    display:inline;
    width:150px;
    height:150px;
    border:1px solid silver;
    margin:0 1em;
}

IE7 gaat het waarschijnlijk niet slikken, omdat ze deze vorm van !important "misbruik" gefixt hebben, en nog steeds geen table of table-cell display ondersteunen.

Maar ik vind het dus ranzig en zou dit nooit zo gebruiken.

[ Voor 16% gewijzigd door Clay op 04-04-2006 22:20 ]