PDA

Volledige versie bekijken : Verticale alignment van een DIV container met behulp van CSS

Patrick_v_R
%Europe/Berlin %578 %2007, 14:53
Hallo,

mijn vraag is dus : Hoe centreer je een gehele div container verticaal met behulp van css?
om horizontaal te centreren weet ik dat je bijv : margin : auto kan gebruiken maar dit heeft geen effect op het verticale gebeuren.
Weet iemand hoe ik dit kan oplossen??

Alvast bedankt
Energy Design
%Europe/Berlin %626 %2007, 16:01
Dit is inderdaad ook iets waar ik een tijdje geleden mee heb zitten stoeien, maar uiteindelijk was ik er achter gekomen...

css luisterd net iets te netjes naar height tags. zo is je <html> height even hoog als de inhoud, dat is de <body> en de <body> is net zo hoog als de content (alleen met background pakt hij wel alles...)

Wat dat betekend is dus vrij simpel...
Zet in je css document de volgende code:
html {
height: 100%;
}
body {
height: 100%;
}
.classVanJouwDiv {
height: 200px;
width: 400px;
background-color: #ff0000;
margin: auto 0 auto 0
}

en als je de div volledig wilt centreren (hor en ver) dan doe je gewoon:
margin: auto;

als het goed is moet dit werken!!

succes!!

groetjes jim
cornflake84
%Europe/Berlin %747 %2007, 18:56
misschien ben ik te dom bezig hoor, maar je script werkt niet bij mijn website (http://www.2imaginary.com/index2.html)

ik heb je script in mijn css gezet en hij ik zie dat hij wel een spatie maakt van de top van mijn browser. het rare is, is dat hij niet verticaal gecentreerd is en dat hij ook een stuk scrollbalk heeft aangemaakt. (dus dat er meer ruimte ONDER dan BOVEN zit)

mijn script:

html {
height: 100%;
}
body {
height: 100%;
}

/* Hoofd container */
div#container {
width: 850px;
height: 400px;
margin: auto;
}
Gerrit55
%Europe/Berlin %822 %2007, 20:44
Huh? het script wat jij daar neerzet, staat NIET in je css/style2.css
bovendien staat erboven ook:
margin: auto 0 auto 0; wat heel wat anders is dan margin: auto
cornflake84
%Europe/Berlin %852 %2007, 21:27
het verandert steeds mijn css omdat ik ook ondertussen allemaal dingen uitprobeer.
ik ben op verschillende forums hulp aan het vragen... niemand komt echt met iets dat werkt.. maar dat is iets anders haha
Gerrit55
%Europe/Berlin %921 %2007, 23:06
@cornflake84:
Zijn we nou met jouw probleem bezig of dat van Patrick_v_R ???
cornflake84
%Europe/Berlin %930 %2007, 23:19
met die van mij haha

dus ik zit eigenlijk met dezelfde fout/probleem als patrick!
ik wil mijn site dus ook verticaal kunnen centreren.

wat nu in mijn css staat is:

body,html {
background: #FFF;
margin: 0px;
padding: 0px;
margin-bottom: 0px;

font: 11px "tahoma", sans-serif;
}

/* Hoofd container */
div#container {
width: 850px;
margin-left: auto;
margin-right: auto;
}

en ik snap dat hij nu alleen horizontaal centreerd, maar voor de rest snap ik het niet.
Gerrit55
%Europe/Berlin %992 %2007, 00:49
@cornflake84:
het is wel een beetje onbeleefd om zomaar een anders topic over te nemen,
als je zelf een probleem hebt , moet je maar een eigen topic starten. Je berichten bij deze gewist.
maikel
%Europe/Berlin %304 %2007, 08:17
Oplossing Jim...

Ik vraag me af of dit gaat werken.

Mocht het niet zo zijn kun je het nog eens zo proberen:
http://www.flashfocus.nl/forum/showthread.php?postid=257135#poststop


Cheers,
Maikel

ps: Als je dit soort vragen hebt ,die vast wel meer mensen als een gesteld zouden kunnen hebben, ZOEK EENS OP HET FORUM, de oplossing staat er meer dan eens op!)