How do I VERTICALLY center my webpage?

**jupa** · 06 Aug 2009, 04: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">

<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>

</body>
</html>

**djlebarron** · 06 Aug 2009, 07: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!

Code:

<!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>

Thread: How do I VERTICALLY center my webpage?

Thread Tools

How do I VERTICALLY center my webpage?

Similar Threads

CSS Rendering Horizontal Nav Vertically in All Browsers

Posting Permissions