Search code examples
htmlcsscenter

How do I center this page?

How do I center this page? I'm a noob. Thanks! 

<html>
<head>
<title>Tech Time Out Pledge</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Save for Web Styles (ttofb.psd) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
                function loadConversionPixel(){
                $('#ho-pixels').append('<iframe src="http://strk.gnlinks.com/SLv3" scrolling="no" frameborder="0" width="1" height="1" onload=”changeLocation();”></iframe>');
		 }
</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-54408410-1', 'auto');
  ga('send', 'pageview');

</script>
<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:900px;
	height:1000px;
}

#ttofb-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:900px;
	height:139px;
}

#ttofb-02 {
	position:absolute;
	left:0px;
	top:139px;
	width:318px;
	height:744px;
}

#ttofb-03 {
	position:absolute;
	left:318px;
	top:139px;
	width:65px;
	height:73px;
}

#ttofb-04 {
	position:absolute;
	left:383px;
	top:139px;
	width:149px;
	height:861px;
}

#ttofb-05 {
	position:absolute;
	left:532px;
	top:139px;
	width:303px;
	height:48px;
}

#ttofb-06 {
	position:absolute;
	left:835px;
	top:139px;
	width:65px;
	height:861px;
}

#ttofb-07 {
	position:absolute;
	left:532px;
	top:187px;
	width:303px;
	height:440px;
}

#ttofb-08 {
	position:absolute;
	left:318px;
	top:212px;
	width:65px;
	height:671px;
}

#ttofb-09 {
	position:absolute;
	left:532px;
	top:627px;
	width:121px;
	height:259px;
}

#ttofb-10 {
	position:absolute;
	left:653px;
	top:627px;
	width:107px;
	height:43px;
}

#ttofb-11 {
	position:absolute;
	left:760px;
	top:627px;
	width:75px;
	height:259px;
}

#ttofb-12 {
	position:absolute;
	left:653px;
	top:670px;
	width:107px;
	height:216px;
}

#ttofb-13 {
	position:absolute;
	left:0px;
	top:883px;
	width:58px;
	height:117px;
}

#ttofb-14 {
	position:absolute;
	left:58px;
	top:883px;
	width:287px;
	height:37px;
}

#ttofb-15 {
	position:absolute;
	left:345px;
	top:883px;
	width:38px;
	height:117px;
}

#ttofb-16 {
	position:absolute;
	left:532px;
	top:886px;
	width:34px;
	height:114px;
}

#ttofb-17 {
	position:absolute;
	left:566px;
	top:886px;
	width:262px;
	height:36px;
}

#ttofb-18 {
	position:absolute;
	left:828px;
	top:886px;
	width:7px;
	height:114px;
}

#ttofb-19 {
	position:absolute;
	left:58px;
	top:920px;
	width:287px;
	height:80px;
}

#ttofb-20 {
	position:absolute;
	left:566px;
	top:922px;
	width:262px;
	height:78px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (ttofb.psd) -->
<div id="Table_01">
	<div id="ttofb-01">
		<img src="images/ttofb_01.gif" width="900" height="139" alt="" />
	</div>
	<div id="ttofb-02">
		<img src="images/ttofb_02.gif" width="318" height="744" alt="" />
	</div>
	<div id="ttofb-03"><fb:like href="https://www.facebook.com/techtimeout" send="false" layout="box_count" show_faces="false" font=""></fb:like>
<div id="fb-root"></div>
<script type="text/javascript">
<!--
	//facebook code
	window.fbAsyncInit = function() {
		FB.init({appId: '116284395201493', status: true, cookie: true, xfbml: true});
		FB.Event.subscribe('edge.create', function(href, widget) {
			// Do something, e.g. track the click on the "Like" button here
			loadConversionPixel();
			// push click to Google Analytics 
			_gaq.push(['_trackEvent', 'Social', 'Clicked', 'Facebook']);
		});
	};
	(function() {
		var e = document.createElement('script');
		e.type = 'text/javascript';
		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
		e.async = true;
		document.getElementById('fb-root').appendChild(e);
	}());
//-->
</script></div>
	<div id="ttofb-04">
		<img src="images/ttofb_04.gif" width="149" height="861" alt="" />
	</div>
	<div id="ttofb-05"> <a href="https://www.facebook.com/TechTimeOut/app_164858677009603"><img src="images/ttofb_05.gif" width="303" height="48" alt="" /></a>
	</div>
	<div id="ttofb-06">
		<img src="images/ttofb_06.gif" width="65" height="861" alt="" />
	</div>
	<div id="ttofb-07">
		<img src="images/ttofb_07.gif" width="303" height="440" alt="" />
	</div>
	<div id="ttofb-08">
		<img src="images/ttofb_08.gif" width="65" height="671" alt="" />
	</div>
	<div id="ttofb-09"> <a href="http://techtimeout.com/technology-ruining-family-vacation/"><img src="images/ttofb_09.gif" width="121" height="259" alt="" /></a>
	</div>
	<div id="ttofb-10"> <a href="http://www.facebook.com/TechTimeOut"><img src="images/ttofb_10.gif" width="107" height="43" alt="" /></a>
	</div>
	<div id="ttofb-11">
		<img src="images/ttofb_11.gif" width="75" height="259" alt="" />
	</div>
	<div id="ttofb-12"> <a href="http://techtimeout.com/technology-ruining-family-vacation/"><img src="images/ttofb_12.gif" width="107" height="216" alt="" /></a>
	</div>
	<div id="ttofb-13">
		<img src="images/ttofb_13.gif" width="58" height="117" alt="" />
	</div>
	<div id="ttofb-14"> <a href="http://www.facebook.com/TechTimeOut"><img src="images/ttofb_14.gif" width="287" height="37" alt="" /></a>
	</div>
	<div id="ttofb-15">
		<img src="images/ttofb_15.gif" width="38" height="117" alt="" />
	</div>
	<div id="ttofb-16">
		<img src="images/ttofb_16.gif" width="34" height="114" alt="" />
	</div>
	<div id="ttofb-17">
		<img src="images/ttofb_17.gif" width="262" height="36" alt="" />
	</div>
	<div id="ttofb-18">
		<img src="images/ttofb_18.gif" width="7" height="114" alt="" />
	</div>
	<div id="ttofb-19">
		<img src="images/ttofb_19.gif" width="287" height="80" alt="" />
	</div>
	<div id="ttofb-20">
		<img src="images/ttofb_20.gif" width="262" height="78" alt="" />
	</div>
</div>
<!-- End Save for Web Slices -->
<div id="ho-pixels"></div>
</body>
</html>

(What else can i actually say to get this posted? It looks like my post is mostly code. This is true, because that's what I need help with. Is this enough details to get my question posted? Yes!)

Solution

  • Change the styles for #Table_01 to the following;

    #Table_01 {
    position:relative;
    margin: 0 auto;
    width:900px;
    height:1000px; /* delete this line if you don't want a fixed height */
}

    The margin property is set to 0 pixels for the top and bottom margin, and auto for left and right, which means the element will appear in the center of the page.

    Hope this helps.