Member Avatar for blong206b_1

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
  • 134 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Albert Pinto

Recommended Answers

All 4 Replies

Member Avatar for NardCake

Just style the table with margin:auto;

Member Avatar for JorgeM

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.

Member Avatar for <M/>

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.

Member Avatar for Albert Pinto

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....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.