Print Page - Centering web page

Title: Centering web page
Post by: InternetPrezentacija on August 08, 2009, 02:49:48 AM

How to center my web page horizontally in web browser window. Which is the best method?

Title: Re: Centering web page
Post by: chase on August 08, 2009, 12:08:15 PM

CSS

parent container with a margin: 0 auto;

Title: Re: Centering web page
Post by: soumali on September 15, 2009, 01:51:27 AM

This is a very simple thing to do with CSS. Here's all you need:

<body> <div id="wrapper"> ... </div> </body>
In this example, the div with the id of "wrapper" is what we want to make centered and fixed width. Now for the CSS:

body { margin: 0; padding: 0; text-align: center; } #wrapper { margin: 0 auto; border: 1px solid red; padding: 0; width: 720px; text-align: left; }
Then within your wrapper, just fill it in with your content. Hope that helps.

Web Site Promotions (http://www.murs.org.uk/)

Title: Re: Centering web page
Post by: chase on September 18, 2009, 01:07:35 PM

Great code example soumali!

Title: Re: Centering web page
Post by: seomayuri on October 20, 2009, 09:21:42 PM

Another method is also here,

when you are using tables,
<body>
<table align=center width=800 border=0><tr><td><h1> Webpages in center</h1></td></tr></table>
</body>

Title: Re: Centering web page
Post by: danidallia123 on May 17, 2010, 11:06:16 PM

The mark up is simple and consists of two structural divs - one container div, and another to hold.

1   <div id="outer">
2     <div id="inner">
3     [content here]
4     </div>
5   </div>

The CSS:

01   #outer {
02     position: absolute;
03     top: 50%;
04     left: 0px;
05     width: 100%;
06     height: 1px;
07     overflow: visible;
08   }
09
10   #inner {
11     width: 300px;
12     height: 200px;
13     margin-left: -150px; /*** width / 2 ***/
14     position: absolute;
15     top: -100px; /*** height / 2 ***/
16     left: 50%;
17   }

Web Design Chennai (http://www.websitedesignerschennai.com)

Title: Re: Centering web page
Post by: regueradela on July 12, 2010, 02:34:14 AM

You can also put like this way for center page.

<head>
</head>
<title>
<body bgcolor="#111111" leftmargin="40">
<center>
<table id="Table_2" width="766" height="780" border="1" cellpadding="1.5" cellspacing="1">
</title>..

Title: Re: Centering web page
Post by: burton71stephens on August 17, 2010, 02:14:38 AM

Quote from: soumali on September 15, 2009, 01:51:27 AM

This is a very simple thing to do with CSS. Here's all you need:

<body> <div id="wrapper"> ... </div> </body>
In this example, the div with the id of "wrapper" is what we want to make centered and fixed width. Now for the CSS:

body { margin: 0; padding: 0; text-align: center; } #wrapper { margin: 0 auto; border: 1px solid red; padding: 0; width: 720px; text-align: left; }
Then within your wrapper, just fill it in with your content. Hope that helps.

Web Site Promotions (http://www.murs.org.uk/)

@soumali.....grttt code

Web Design Forums

Web Design Help => HTML and CSS => Topic started by: InternetPrezentacija on August 08, 2009, 02:49:48 AM