Meerdere div's horizontaal uitlijnen

[leoj]

Ik wil twee div's (met tekst en een border) die een vaste breedte hebben, horizontaal uitlijnen op een pagina. Heel af en toe moet er één bij komen (dan heb ik er dus drie) maar af en toe ook maar één.
Eén div horizontaal uitlijnen (in het midden) is geen probleem, maar zodra ik een tweede of een derde div horizontaal uitgelijnd wil hebben krijg ik dat niet voor elkaar.


Als iemand voor mij de oplossing weet graag.

Alvast bedankt voor de moeite,

Leo

 

[Naarling]

Dat kun je doen door de divs als inline blokken weer te laten geven en in een container te zetten met text-align:center; De drie blokken zullen dan in het midden van de container div komen te staan
De HTML

<div class="container">
    <div class="blok"></div>
    <div class="blok"></div>
    <div class="blok"></div>
</div>

En de CSS.

.container{
    text-align:center;
}
.blok{
    display:inline-block; 
    zoom:1;
    *display:inline;
}

Het zoom:1;*display:inline; deel is trouwens alleen om te zorgen dat het ook in IE7 werkt. Als IE7 ondersteuning niet nodig is kun je dat deel weglaten.
Voor de duidelijkheid, nog even een demo.

 

[leoj]

Dank je Naarling, zo'n naarling ben je dus ook weer niet

Werkt perfect, heb getest met één, twee drie en vier blokken.

Onwijs bedankt voor je snelle en goede reactie.

groeten,
Leo

 

[leoj]

Heb toch nog problemen, ik heb nu drie blokken naast elkaar staan, die allemaal exact dezelfde tekst bevatten. Deze blokken staan nu mooi horizontaal gecentreerd. Als ik nu in het eerste blok een extra tekstregel plaatst, schuiven blok twee en blok drie naar beneden. Plaatst ik nu in blok drie ook een extra regel, dat schuift deze iets op naar boven, maar staat niet op gelijke hoogte van blok één, maar tussen blok één en twee in. De blokken heb ik exact dezelfde hoogte gegeven.

Alvast bedankt

 

[Naarling]

Heb je een link naar de pagina met het probleem?

 

[leoj]

http://familie-jordaan.nl/test2


Als je ernaar zou willen kijken graag.

 

[Naarling]

Een oplossing is om aan de paragrafen in je blokken float:left; mee te geven.

 

[leoj]

Door het meegeven van een float: left, staan de blokken niet meer meer horizontaal gecentreerd, dit had ik al geprobeerd. Kan je anders een voorbeeld geven?

 

[Naarling]

Vermoedelijk he je dan float:left aan de blokken zelf meegegeven, niet aan de paragrafen. Zie hier een voorbeeld. Overigens moet je dan wel weer een breedte aan de paragrafen meegeven anders zullen ze niet automatisch de hele breedte van het blok innemen.

 

[leoj]

Dank je wel, werkt perfect, alleen begrijp ik niet waarom dit werkt.
Ga dat eerdaags wel uitzoeken waarom het zo werkt.

Nogmaals bedankt