Div 's centraal uitlijnen

Status
Niet open voor verdere reacties.

vacances2000

Gebruiker
Lid geworden
28 jan 2013
Berichten
113
Beste,
Ik wil graag de layers centraal uitlijnen maar ik zie echt niet in hoe..

Er zijn 9 blokken. Level 1 = Wrapper (staat reeds centraal), Level 2 = Layer3, Level 3 = de 9 blokken (dit moeten de categorieën worden).

Mijn html is :

HTML:
<head>
  
	<style>
	
	#wrapper{position:relative; margin:0 auto; width:500px; background-color: yellow; }
	#layer1, layer2, layer3{position:relative;  margin: 0 auto, width:100%; background-color: blue; }
	#category{position:relative; float:left; width: 25%; box-align:center; box-flex:center; background-color:orange; margin:1%;}
	</style>
  </head>
  <body>
<div id="wrapper">
<div id="layer1">sdgs</div>

<div id="layer2">
<div id="category">dfsd</div>
<div id="category">dfsd</div>
<div id="category">dfsd</div>
<div id="category">dfsd</div>
<div id="category">dfsd</div>
<div id="category">dfsd</div>
</div>

<div id="layer3">klmkkk</div>

</div>
  </body>

Dank voor de hulp.

Vriendelijke groeten,

Jonathan
 
Laatst bewerkt:
De regel #layer1, layer2, layer3{
wijzigen in #layer1, #layer2, #layer3 {

box-align wordt dacht ik niet meer gebruikt, of bedoel je hier text-align:center;
Flex info hier

Een id mag maximaal 1 keer voorkomen. Gebruik dan class="category"
In de style wordt het dan .category {....}

Suc6. Have fun.
 
Beste Bron,
Thx for het antwoord. Helaas helpt het niet.

Als voorlopige oplossing heb ik het totale percentage van een rij div's -100% / 2 genomen. Dan in CSS Left: xx%.

Maar goed, ik zoek nog steeds een betere oplossing om die div's op een andere manier te centreren...

Iemand anders een oplossing?

Dank en vriendelijke groeten,

Jonathan
 
Elke categorie heeft een breedte van 25%.
Dan kun je door met de margin te spelen het in het midden krijgen?

Ik snap trouwens niet veel van je opzet. Wil je max 3 of 4 categorieën naast elkaar?
 
margin-right en margin-left worden bij de 25% opgeteld. De breedte van een category is in je css 27%. Zet de volgende css bovenaan in je style en gebruik padding dan blijft de category 25%.
Code:
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
Als alternatief kan je de category 23% maken met een margin van 1%. Geef <body> een margin:0

Suc6.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan