Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

div centreren (Opgelost)

cloudstrife - 21/04/2008 18:02
PHP beginner		Misschien een simpele zaak en voor de hand liggend maar tot hiertoe toch niet echt iets gevonden. Hoe kan je divs in een div centeren? Ik heb 2 of 3 divs die ik naast elkaar plaats via float:left, deze zitten in 1 grote div. De 2 of 3 divs moeten nu gecentreerd worden in de div. Ik heb al geprobeert via margin-left:auto en dergelijke, dit werkt in firefox maar totaal niet in IE. Alvast bedankt

7 antwoorden

Gesponsorde links

cloudstrife - 21/04/2008 18:09

PHP beginner

Nope

Dit is de code (+ aanpassingen van sandernerd) wel gewoon om ff te testen eh.

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<body>
<div style="background-color:red;width:90%;padding:5px;height:200px;">
<div style="position:relative; left:50%;background-color:#00FF00;border:1px solid #000000;">
	<div style="background-color:#ffff00;width:100px;float:left;">1</div>
	<div style="background-color:#ffff00;width:100px;float:left;">2</div>
</div>
</div>
</body>
</html>

<html>
<body>
<div style="background-color:red;width:90%;padding:5px;height:200px;">
<div style="position:relative; left:50%;background-color:#00FF00;border:1px solid #000000;">
	<div style="background-color:#ffff00;width:100px;float:left;">1</div>
	<div style="background-color:#ffff00;width:100px;float:left;">2</div>
</div>
</div>
</body>
</html>

Kr4nKz1n - 21/04/2008 18:11
Onbekend		Werk met een externe stylesheet is veel makkelijker.

cloudstrife - 21/04/2008 18:13 (laatste wijziging 21/04/2008 18:14)
PHP beginner		Kr4nKz1n schreef: Werk met een externe stylesheet is veel makkelijker. Ik zie niet in hoe dat mijn probleem zou oplossen... en zoals ik al zei, dit is ff om te testen....

Kr4nKz1n - 21/04/2008 18:16
Onbekend		Het is voor ons (ik ken eigenlijk niemand die geen externe stylesheet gebruikt) fijner werken, en je vraagt wat aan ons dus...

cloudstrife - 21/04/2008 18:22
PHP beginner		Voor zo een onozel stukje code is het denk ik geen enkel probleem om interne css te gebruiken en het toont overigens snel het probleem aan + als er hulpvaardige mensen zijn die dit zelf ff willen testen moeten ze maar 1 bestandje aanmaken ipv 2. Dus lijkt het me logischer om het zo ff te testen. Bovendien is uw reactie totaal naast de kwestie, dus geef een mogelijke oplossing of hou uw mening voor u. Het gebruik van interne of externe stylesheets staat hier niet ter discussie.

cloudstrife - 21/04/2008 18:39 (laatste wijziging 21/04/2008 18:45)

PHP beginner

Sandernerd schreef:

Heb je al eens geprobeerd om er een margin van te maken op 50%?

Dat centreert niet echt perfect, je heb links meer ruimte dan rechts naar gelang de breedte van de divs.

Ik heb volgende geprobeert: margin:0px auto; dit doet het goed in firefox maar niet in IE

Inmiddels zelf kunnen oplossen:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<body>
<div style="text-align:center;align:center;background-color:red;width:90%;padding:5px;height:200px;">
<div style="margin:0px auto;width:200px;">
	<div style="background-color:#ffff00;width:100px;float:left;">1</div>
	<div style="background-color:#ffff00;width:100px;float:left;">2</div>
</div>
</div>
</body>
</html>

<html>
<body>
<div style="text-align:center;align:center;background-color:red;width:90%;padding:5px;height:200px;">
<div style="margin:0px auto;width:200px;">
	<div style="background-color:#ffff00;width:100px;float:left;">1</div>
	<div style="background-color:#ffff00;width:100px;float:left;">2</div>
</div>
</div>
</body>
</html>

Mijn excuses voor de inline css

Kr4nKz1n - 21/04/2008 18:45 (laatste wijziging 21/04/2008 18:47)
Onbekend		Je kunt denk ik het beste nog een div gebruiken, hierin zet je de divs 1 en 2, en deze div geef je margin: 0 auto 0 auto; Edit Al opgelost zie ik. Alleen is hij nu is de inhoud niet gecentreerd, maar de div zelf ook. S6 verder

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten