If I wanted to create a web page with content about the size of a post card, how would I go about positioning it on the screen?
Horizontally isn't an issue (margins auto); however, centering it vertically is a an issue.
What's the best way of centering the container vertically? Javascript? Should I even be trying to center it vertically, or would you in general prefer a page to start near the top?
Thanks!
You can do this with CSS. Center a container DIV using 50% left and top. Then simply offset your contained postcard 50% of its width & height back.
<div id="postcard_container">
<div id="postcard">
Postcard here
</div>
</div>
#postcard_container {
position:absolute;
display:block;
width:1px;
height:1px;
left:50%;
top:50%;
}
#postcard {
position:absolute;
width:800px;
height:600px;
left:-400px;
top:-300px;
}
I think I'm going to give in and go the tables route; it appears to be rendering correctly cross-browser:
<head>
<title></title>
<style type="text/css">
#content {
text-align: left;
padding: 5px;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<table style="width: 100%; height: 100%">
<tr valign="middle">
<td align="center">
<div id="content">
Postcard here
</div>
</td>
</tr>
</table>
</body>