PDA

View Full Version : How do I VERTICALLY center my webpage?


jupa
06 Aug 2009, 05:56 PM
I'm a newbie to webdesign. I've done a lot of research on how to vertically center a website, but I'm left very confused. I've copied my html below. Is there anyone who can help me by telling me what and where I need to place in the code below? Thanks!

<html>
<head>
<title>site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (site.jpg) -->
<center>
<table id="Table_01" width="1000" height="773" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/index_01.jpg" width="1000" height="265" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_02.jpg" width="213" height="508" alt=""></td>
<td><a href="pdf/pdf.pdf"><img src="images/Link-to-Pdf.jpg" width="573" height="208" border="0"></a></td>
<td rowspan="2">
<img src="images/index_04.jpg" width="214" height="508" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_05.jpg" width="573" height="300" alt=""></td>
</tr>
</table>
<center>
<!-- End Save for Web Slices -->
</body>
</html>
djlebarron
06 Aug 2009, 08:34 PM
You can play around with the #horizon's margin-top value to adjust the site vertically. You'll also have to set the div widths to your own site's requirements. It should center vertically fairly well in all resolutions as well as center horizontally unless I left something out. I copied this from one of my centered (horizontally and vertically in all resolutions) unpublished sites. Works great on my own Apache. I haven't gotten around to moving the inline style into the head. Mybad!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTL 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css" media="screen">
#horizon {
background-color: transparent;
position: absolute;
top: 50%;
left: 0px;
margin-top: -290px;
width: 100%;
}
</style>

</head>

<body bgcolor="#4b4c4e">
<div id="horizon">
<div style="width: 891px; padding-top: 10px; padding-bottom: 10px; position: relative; margin: auto; background-color: white;">
<div id="container_main" style="width: 871px; position: relative; text-align: left; border: 0; background-color: white; margin: auto;">

ACTUAL SITE CONTENT HERE

</body>
</html>