Tue, 2003-07-29 08:30
This is one way of vertically centering using DHTML to adjust the margin as the page loads.
function vertcenter(x){ var x=document.getElementById(x); var h=x.style.height; var sch=screen.availHeight; var dt= (sch-h)/4; x.style.marginTop=dt+"px"; }
div#theid{ width:300px; height:300px; margin-top:0; margin-bottom:0;}
<body onload="javascript:vertcenter('theid');"> <div id="theid"> </div>
You could of course change the value of top instead of margin.
If you know of any simpler ways please post.
Tue, 2003-07-29 16:50
#1
FAQ Vertical Centering
Centering via Auto-width margins
body { margin:50px 0px; padding:0px; text-align:center; } #Content { width:500px; margin:0px auto; text-align:left; padding:15px; border:1px dashed #333; background-color:#eee; }
Centering with a Negative Margin
body {margin:0px; padding:0px;} #Content { position:absolute; left:50%; width:500px; margin-top:50px; margin-left:-266px; padding:15px; border:1px dashed #333; background-color:#eee; }
Both solutions gracefully copied from bluerobot.com. Not sure if these quite match the "vertical centering" mentioned in Tony's post, though.
Tue, 2003-07-29 20:51
#2
FAQ Vertical Centering
Hmm, they more match the 'Horizontal Centering', another post in the FAQ section...
Wed, 2003-07-30 01:19
#3
FAQ Vertical Centering
Oops... really faq'd that one. Thanks