0

How do I center on a web page?

<!DOCTYPE html>
<html>
<body>

<table width="600" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Page Title</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
Foxtrot<br>
Waltz<br>
Tango
</td>
<td style="background-color:#EEEEEE;height:200px;width:500px;">
Ipsem Lorem</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Test Page</td>
</tr>
</table>

</body>
</html>

I found some tips like this:

margin: 0 auto;

Where does it get typed?

Thanks

5
Contributors
4
Replies
31
Views
4 Years
Discussion Span
Last Post by Albert Pinto
1

For your example, you can simply update line #5 to:

<table width="600" border="0" style="margin:0 auto;">

However, you may want to consider styling all of your elements in an external style sheet. this will be more important if you have more than one HTML page with elements that need styling. An external sheet allows you to have a centralized file to store all of the styling information.

0

Here is a link that may help (same as JorgeM's solution): http://davidwalsh.name/center-website

You should do what JorgeM says about an external style sheet because it will keep your index page cleaner and shorter. You can just reference everything basically and you wouldn't have to manually code each page.

0

Simple my friend...

Just put your table or whatever content.... inside a container

Say like... parentcontainer

-----------------------------------

HTML code

<div id="parentcontainer">

Your table content here....

<table width="600" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Page Title</h1>
</td>
</tr>

blah.... blah.... blah...

</table>

</div>

and then in CSS file....

#parentcontainer{width: 1024px;margin: 0 auto;}

Thats it.... !!

Thing is that you have to give a fix width to the parent container and then margin: 0 auto; in CSS file... margin-top and margin-bottom will be zero... and margin-left: auto and margin-right: auto will center your div.

However I'm afraid this might not work in Internet explorer.

To center your div in IE...

in CSS

body{text-align: center;}

There might still be a better way to center it in IE. Other members might help....

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.