FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


How Do You Center Your Entire Web Page?





ChunkyBustout
Hello all,

I wanted to know how do you center your web page, in any browser, regardless of the width of the browser window?

My page is 800x600 so if the window is smaller than my page I don't think that really matters. But if the window is wider than 800px, I would like it centered.
Arin
There are few ways. Below is a quote from a document which I have found in google cache, coz original site seems not exist any more.


Quote:

* How do I center ... using only a style sheet?

David Dorward's guide (with pretty pictures): http://dorward.me.uk/www/centre/

(From Rijk van Geijtenbeek on comp.infosystems.www.authoring.stylesheets on 29 October 2001)

The HTML attribute 'align=center' can not be translated directly to CSS, as it did different things for different elements.

Centering the content of block-level elements like P, H1-H6, etc.

The use of the rule 'text-align: center;' will center all the inline content of the block-level element. The element itself still occupies all of the available width.

Centering an IMG

An IMG is defined as an inline element it goes with the flow in a paragraph of text just like a B or an CODE. Inline elements cannot be centered themselves.

Solution: wrap the IMG in a otherwise empty DIV, and center the content of this DIV with 'text-align: center;'

Solution 2: 'display: block; margin-left: auto; margin-right: auto;'

Centering block-level elements themselves, not their content

This is only possible when the block-level element has a width that is less than the available horizontal space. By default, all block-level elements (except TABLE, which is a special case) expand to fill the entire available horizontal space, even when they don't need to on behalf of their content.

Solutions:

* set a specific width:

DIV.x {width: 50%; margin-left: auto; margin-right: auto;}

* change the value of the display property:

DIV.y {display: table; margin-left: auto; margin-right: auto;}

A solution that only works in browsers that don't get the CSS box model right is this one:

* wrap the element within another element

<div style="text-align: center"><div> ...

This will fail to work in Opera 4+, Netscape 6+, Mozilla, and MSIE 6 in standards mode.

Tip 1: Set temporary colored borders on the block-level element to see what's happening in various browsers.

Tip 2: Don't expect much from Netscape 4.x.

If you are centering a layer which contains the entire document, you can do it by setting the body's padding-left to 50%. Then position the layer relatively and give it a left of minus half its width. This works in IE6 and Mozilla, but is screwed up in Dreamweaver MX.

To make the above editable by Dreamweaver MX, you can do it by again setting the body's padding-left to 50%, but this time set the right of the layer to half its width. (Your mileage may vary.)

You can also use the following CSS as a solution for centering a div containing the whole document:

body { text-align: center;}
div.main { text-align: left; width: 70%; margin-left: auto; margin-right: auto; }

In this example, the div containing the main content would have the class "main". This works for versions of Internet Explorer which don't support the correct way of doing it by using the "text-align: center;" property for the body. The other text-align for the div corrects the fact that all of the text in that div is also centered by IE.

Centering a TABLE

Centering a table should work the same as for block-level elements. Keep in mind that tables do not expand to fill the entire available horizontal space unless the content inside the table requires it.

This works in all compliant browsers:

TABLE {margin-left: auto; margin-right: auto;}

For some older CSS-capable browsers, this addition can be useful:

TABLE {margin-left: auto; margin-right: auto; text-align: center;}

You should also add:

TD {text-align: left;}

... to prevent some (hypothetical) problems in compliant browsers.

MSIE 6 reacts differently depending on the rendering mode it is in. This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and Netscape 4.x without setting any explicit widths:

div.centered {text-align: center;}
div.centered table {margin: 0 auto; text-align: left;}
<div class="centered"><table>
...
</table>
</div>

To also work in Mac IE 5, the margin setting on this style needs to be in the long form:

div.centered table {margin-left: auto; margin-right:auto; text-align: left;}


URL to the cache: http://64.233.183.104/search?q=cache:Gcc8zuphfmQJ:www.allmyfaqs.com/faq.pl%3FCenter_with_CSS+css+align+center


Cheers,
Arin.
Simulator
Just go
Code:
<div aling='center'>
Your content
</div>
Arin
Simulator wrote:
Just go
Code:
<div aling='center'>
Your content
</div>


Not quite.

The 'align' attribute is marked as Deprecated in HTML 4.01 specification.

From W3.org:
Quote:
A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.

User agents should continue to support deprecated elements for reasons of backward compatibility.


Thus it is good to get a manner of making code without this attribute.


Cheers,
Arin.
Helios
<body xxx><center>website</center></body>
Arin
Helios wrote:
<body xxx><center>website</center></body>


Deprecated.

Take a look on specification:

http://www.w3.org/TR/REC-html40/present/graphics.html


Cheers,
Arin.
ChunkyBustout
All these tags are great for centering specific parts of the a page but what about centering the entire page within the browser window? Is this even possible?
Arin
ChunkyBustout wrote:
All these tags are great for centering specific parts of the a page but what about centering the entire page within the browser window? Is this even possible?


Sure.

Lets make two exaples.

Example 1.

Your site is rather plain text with text formatting elements like <p> or <ul>
then:
Code:

<body>
<div style="text-align: center;">

<p>Welcome on my site!</p>
<h1>Very nice site.</h1>

</div>
</body>


Example 2.

Your site is table based. We could add style="text-align: center;" into table tag, but AFAIR IE and Firefox shows that slightly different. So - you can either add a <div> tag as shown above, or nest table in table and then use style="text-align: center;" in <td> tag. But this requires setting up width attribute in table :). Third way could be setting left and right margins on auto as it is shown in my first post. In other words - you need to experiment a little.


Cheers,
Arin.
bogden
in your GUI web design program, just create a table 100% width (which will be whatever the width of the users screen is), then tag the table for centered contents.
Marcin_K
bogden wrote:
in your GUI web design program, just create a table 100% width (which will be whatever the width of the users screen is), then tag the table for centered contents.


plus make it 100% hight and vertical center the object - u get ur content exactly in the centre of the screen...
ChunkyBustout
Can I do this with a div instead of a table?
Summer
You can use <table> tag to cover all the contents of ur site .
The table tag u want maybe is
<table width="800" align="center" border="0"> .

Quote:
Can I do this with a div instead of a table?


I think <table> is better . If u dun wan the border , just use my code above . It cancelled the border, so that ppl wouldnt know u used table .
dragonflame
are you looking for a css solution? if it's using tables...

<table height="100%" width="100%">
<tr>
<td valign="middle" align="center">
<!-- begin content -->

<!-- end content -->
</td>
</tr>
</table>
dkbg
Well, I'm pretty sure Arin's suggestions cover you, but for clarity I'll just reiterate.

For a perfectly functioning centered page wrap your entire content in a <div> like so:

Code:
<body>

<div style="text-align: center; margin-left: auto; margin-right: auto;">
<h1>Here is a first level heading</h1>
<p>Here is some content.</p>

...whatever else you want in here...

</div>

</body>


Now, you could also apply a class or an id to that div and then use some external or embedded styles instead of the inline style attribute, but either way would work. The text-align: center part is for IE which doesn't correctly interpret the auto margins but incorrectly interprets text-align: center to produce the same effect.

There you have it. Now, you could actually apply these styles to the body element, but that may complicate things depending on your site setup.

Also, since text-align is set to "center" all of your text content will be centered so you'll have to to reset that to text-align: left; in another div right inside the first (or just apply the first styles to the body as I mentioned above and use only a single div just inside the body to reset the text-align), like so:

Code:
<body>

<div style="text-align: center; margin-left: auto; margin-right: auto;">

<div style="text-align: left;">

<h1>Here is a first level heading</h1>
<p>Here is some content.</p>

...whatever else you want in here...

</div>
</div>

</body>


Hopefully that helps.
Shirish
U must use the <div> style


or other alternative is to use <center> tag


I personally like using tables

and setting theor width to 100%

and and setting margin to 0 and padding to 0



Just try it out

Its the best technique

and looks more professional than other methods
cokdes
Use a web editor program. and search the tools or properties that can center your web
jlbribeiro
Marcin_K wrote:
bogden wrote:
in your GUI web design program, just create a table 100% width (which will be whatever the width of the users screen is), then tag the table for centered contents.


plus make it 100% hight and vertical center the object - u get ur content exactly in the centre of the screen...


That's what I've made. The problem is that my site doesn't center in vertical. Why? Can someone help me to center it in the vertical?
Related topics
Beautiful personal web page!
Which is the best content management software
LOST
web page maker
web page maker
Web Page Maker
Department web page
how long does web page posts take ???
Anyone know how to make an email form?
Help on making a web page
secure your pictures on a web page !
how to insert data into mysql base from a web page
Looking for a place to start a business Web page
Simple code to make your web page !
Reply to topic    Frihost Forum Index -> Computers -> Computer Problems and Support

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.