html page alignment issue

Question

Hello everyone,

I am developing an html page on Windows platform. I find when the resolution (or size, in pixels) of browser (display) is larger than the page size, the page will be aligned to the left of the browser, and I want to align the page to the center (middle) of the browser when the page size is smaller than browser.

Any ideas how to implement this and how to find the root cause why aligned to left? The html page is big and not convenient to paste html code here.

thanks in advance, George

Answer 1

Any ideas how to implement this and

http://dorward.me.uk/www/centre/

how to find the root cause why aligned to left?

… because that is the default.

Answer 2

<style>
body
{
    width:800px;
    margin:auto;
}
</style>

Answer 3

you simply need to add, text-align: center; to your body to cover legacy browsers and add:

text-align: left;
margin: 0 auto;

to your first container div ... this will be centered horizontally in all browsers, no matter how old.

Answer 4

First of all, you'll want to wrap your page content in a block (this block will be centered):

<div id="body">
    <!-- your page content here -->
</div>

Then you'll want to style it as being centered. Due to a little disparity in how Firefox and IE handle centering a block, you'll have to do 2 things to center this block.

1. Set the body as centering everything (for IE):

body {
    text-align: center;
}

2. Set the left and right margins of your interior block as 'auto'; and

3. Since centering text inherits to its child nodes, you want to set it back to left-alignment (unless, you do want all your text to be centered.. blah!):

#body {
    margin: 0px auto;
    text-align: left;
    width: 800px; /* set this width to how wide you want your content to be */
}