Place your entire website in two holding containers, #horizon and #content.
<body>
<div id="#horizon">
<div id="#content">
your site
</div>
</div>
</body>Add following styles to these containers in your stylesheet:
#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
#content {
background-color: #c9d9b8;
margin-left: -200px;
position: absolute;
top: -100px;
left: 50%;
width: 400px;
height: 200px;
}Customisation happens in the styles of the #content container. I''m using a width of 400px and a height of 200px for this site. If you want to change these dimensions, you will also have to change the margin-left and top of #content.
margin-left: - (width/2)px;
top: - (height/2)px;Good luck!
PS: I do not take credit for this technique. It was published on a CSS tutorial site. I have lost the address of this site - do any of you readers out there know it?
Door patrice 28/01/05 (7 jaren geleden)
RE: How to center your site horizontally and vertically with CSS.
http://www.hicksdesign.co.uk/journal/30/vertical-centering-with-css
Door 08/05/06 (5 jaren geleden)
Re: How to center your site horizontally and vertically with CSS.
doesn't work....
Door 22/08/06 (5 jaren geleden)
Re: How to center your site horizontally and vertically with CSS.
http://www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css
Door cousin cocaine 04/09/06 (5 jaren geleden)
worked for me
thnx, this solved my (also sebe's) problem.
#center {
margin-left: -400px;
position: absolute;
top: 0px;
left: 50%;
}
(pagwidth = 800px)
THE WHOLE PAGE
Door manu 03/07/07 (4 jaren geleden)
Re: How to center your site horizontally and vertically with CSS.
this code works, but yuo should drop the # in the div ids, like so
Door Bas van Pelt 10/06/08 (3 jaren geleden)
Re: How to center your site horizontally and vertically with CSS.
Thanx, for me it works!
Er zijn nog geen tweets over dit artikel.