ansaurus

Question

how to display the whole page in the center of the browser

Answer 1

+1 A:

just playaround with following styles

<body> 
 <div id="divMain"> 
  ... 
 </div> 
</body> 


body 
{ 
 margin: 0; 
 padding: 0; 
 text-align: center; 
} 
#divMain
{ 
 margin: 0 auto; 
 padding: 0; 
 width: 1024px; 
 text-align: left; 
} 



or

.divMain
{
position: absolute;
left: 10%;
width: 80%;
}

Saar 2010-01-26 08:36:45

Answer 2

+3 A:

Firstly, the use of the center tag has been deprecated, so you shouldn't use it.

<center>
    Your content here
</center>

Your solution of (I've put the css inline for clarity)

<div style="width: 1400px; margin: 0 auto;">
    Your content here
</div>

Is the correct method of centering content on a page.

As you have noticed, if the screen is smaller than your content width, it doesn't appear to be centered. This is because there is no space for a margin on the left or right of the page and it would be inconsistent to start the browser scrollbar in the middle of the page.

Your options are:

Live with it - it's how all center-aligned websites work
Reduce the width of your website to work on smaller screens (it will then have a larger margin on larger screens)
Make your design more fluid - like the example below

Hope this helps.

<div style="width: auto; margin: 0 10%;">
    Your content here
</div>

Sohnee 2010-01-26 08:37:12

ansaurus

tags:

views:

answers:

how to display the whole page in the center of the browser

related questions