?
Solved

Center website in borwser on any resolution

Posted on 2009-02-11
4
Medium Priority
?
765 Views
Last Modified: 2012-05-06
I am designing a website and would like the complete content of the website to be centered no matter what resolution the monitor is set to. I have been able to center it horizontally, but unable to vertically. EX: when I set screen to a high resolution, the content will be centered horizontally, but will still be located at the top of the browser.

Here is my current code.

<style type="text/css">
html, body, #wrapper {margin:5;padding:0;height:100%;text-align:center;}
#wrapper {margin:5 auto;vertical-align:middle;width:250px;}
</style>
</head>
<body onload="preloadImages();" bgcolor="#000000"><table id="wrapper"><!-- ImageReady Slices (website.psd) --></table>

Please let me know what code I can use to accomplish my goal.

thanks
0
Comment
Question by:jfilmore3
  • 2
4 Comments
 
LVL 2

Expert Comment

by:reece400
ID: 23613388
The simplest way would be to change it as below:


For more advanced, more current methods, see: http://www.webmasterworld.com/forum21/8204.htm
<style type="text/css">
html, body, #wrapper {margin:5;padding:0;height:100%;text-align:center;}
#wrapper {margin:5 auto;vertical-align:middle;width:250px;}
</style>
</head>
<body onload="preloadImages();" bgcolor="#000000"><center><table id="wrapper"><!-- ImageReady Slices (website.psd) --></table></center>

Open in new window

0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 23613452
this comes from another page but try it

of course the main page should contain
<div id="main">
something
</div>
body
{	
margin-top:	0px;	
margin-left: 0px;	
margin-right: 0px;	
margin-bottom: 0px;	
font-family: Tahoma, Arial, Helvetica, sans-serif;	
font-size: 9pt;	
background-color: black; 
width: 100%;
height: 100%;
}
 
#main
{
	position: absolute;
	top:50%;
	left: 50%;
	margin-top: -250px; /* make this half your image/element height */
	margin-left: -450px; /* make this half your image/element width */
	height: 500px;
	width: 900px;
	display: table;
	vertical-align: middle;
	border: 1px solid #7D5700;
}

Open in new window

0
 
LVL 2

Accepted Solution

by:
reece400 earned 2000 total points
ID: 23613664
Sorry,

Mis-read your question initially. To center Vertically, you place in in a table cell, and center that cell vertically, see below for more info:

http://www.cracked.com/forums/index.php?topic=17473.msg457703

Alternatly you could "Use a negative margin that is half the table height then relatively position the table 50% from the top of the viewport:

table {position: relative; height: 500px; top: 50%; margin-top: -250px;} " 

http://www.webmasterworld.com/forum21/11424.htm
0
 
LVL 9

Expert Comment

by:AsishRaj
ID: 23637308
you are using margin and padding in your css thats y its start at the top. take those out and insert  vertical-align: middle;
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 17 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question