Div centreren binnen div

Status
Niet open voor verdere reacties.
F

Fliene

Gebruiker
Lid geworden
17 aug 2009
Berichten
44
Hoi allemaal!

Ik heb (weer) een vraagje!

Hoe kan ik een div in het midden van een andere div zetten? :) Ik heb al van alles gezocht en misschien ben ik scheel of op de verkeerde termen gezocht, maar ik kan het niet vinden!

Alvast bedankt!

Groetjes Eveline
 
Opzet:
Code: 
<body >

<div style="width:800px; margin:auto; border: solid 1px #00ff00;"><br>
<br>Divje een
<br>Divje een
<br>
Divje een
<br>

<br><div style="width:600px; margin:auto; border: solid 1px #ff0000;"><br>
<br>Divje twee<br>
<br>
<br>
</div>
<br><br>Divje een
<br>Divje een
<br>
Divje een
<br>
</div>

</body>

:cool:
 
Als je die margin van die binnenin staat komt ie dus in het midden te staan van de pagina, maar niet in het midden van de div. En hij moet dus echt in het midden staan, niet alleen horizontaal, maar ook verticaal. (lijkt me logisch?)
 
Kijk ik dan scheel :rolleyes: ?

Hier volle code:
Code: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Wednesday, March 17, 2010 22:19:16 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" content="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="all">
 @import url("zp.css"); 
</style>
		 
<LINK rel="stylesheet" type="text/css" href="zp.css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}
</style>
</head>

<body >

<div style="width:800px; margin:auto; border: solid 1px #00ff00;"><br>
<br>Divje een
<br>Divje een
<br>
Divje een
<br>

<br><div style="width:600px; margin:auto; border: solid 1px #ff0000;"><br>
<br>Divje twee<br>
<br>
<br>
</div>
<br><br>Divje een
<br>Divje een
<br>
Divje een
<br>
</div>

</body>

</html>

:cool:
 
Daar staat dus nog hetzelfde. divje 2

Code: 
margin: auto

;) dan komt ie dus in het midden van de pagina te staan en niet in het midden van het divje... Hij moet dus in het midden van het eerste divje te komen staan. Snappie? :)
 
Code: 
<body >

<div style="width:500px; float:left; border: solid 1px #00ff00;text-align:center;">
Divje een
<div style="width:400px; padding:40px; border: solid 1px #ff0000;text-align:left;">
Divje twee
</div>

Divje een
<br>
</div>

</body>
Beter?

:cool:
 
Dat van peter vazed zou moeten werken voor horizontaal centreren binnen de div. Als 't niet werkt, heb je denkelijk geen geldig doctype.
Voor verticaal centreren van 'n div binnen 'n andere div moet je position: absolute gebruiken. Maar dan werkt margin: 0 auto niet meer.
De paarse div hieronder staat horizontaal én verticaal gecentreerd binnen de gele div.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css" />
	<meta name="description" content="Horizontaal én verticaal centreren van blok-element met bekende hoogte - voorbeeld. Gebruikt alleen xhtml en css." />
	<title>Horizontaal én verticaal centreren van pagina of blok-element met bekende hoogte - voorbeeld</title>
	<style type="text/css">
		body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 110%;}
		div#pagina {position: absolute; top: 50%; left: 50%; width: 750px; height: 400px; margin: -200px 0 0 -375px; background: yellow;}
		div#rood {position: absolute; top: 50%; left: 50%; width: 248px; height: 248px; margin: -125px 0 0 -125px; border: black solid 1px; background: #f6c;}
		h1 {font-size: 1.3em; text-align: center;}
		h2 {font-size: 1.4em; font-weight: normal; text-align: center;}
	</style>
</head>
<body>
	<div id="pagina">
		<h1>Verticaal én horizontaal gecentreerde pagina</h1>
		<div id="rood">
			<h2>Binnen de gele pagina verticaal en horizontaal gecentreerd blok-element</h2>
		</div>
	</div>
</body>
</html>

De volledige uitleg en zo staat op http://css-voorbeelden.nl/positioneren/horizontaal/positioneren-068.html
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan