I am trying to center a table and know I need to use <div class=''></div>. Here's my problem: I have a menu that was written in JavaScript and is using <div style=''></div> for placement. I would like to center the table, but am finding it a "hard row to hoe!" Any suggestions?

<div style="position: absolute; top: 10px; height: 27px; z-index: 1;" id="mainmenu" >
<table border='1'width='80%'>
<tr>
<td bgcolor='#0099FF' height='6.75'></td>
<td bgcolor='#333399' height='6.75'></td>
<td bgcolor='#CCCCCC' height='6.75'></td>
<td bgcolor='#0099FF' height='6.75'></td>
<td bgcolor='#333399' height='6.75'></td>
</tr>

<tr>
<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='aboutUs.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','inherit','visibility','show')"><span class="font">About Us</span></a></td>

<td width='100' style='text-align:center;' ><a class="menu" href="javascript:void" onclick="window.location.href='news.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','visible','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','visible','visibility','show')"><span class="font">News</span></a></td>

<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='qstatim.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','visible','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','visible','visibility','show')"><span class="font">QStatim</span></a></td>

<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='partners.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','inherit','visibility','show')"><span class="font">Partners</span></a></td>

<td width='100' style="text-align:center;"><a class="menu" href="javascript:void" onclick="window.location.href='contactUs.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','visible','visibility','show')"><span class="font">Contact Us</span></a></td>
</tr>

</table>
</div>


Thanks!!!

What doctype are you using? Without a doctype, you'll have different behaviors in different browsers.

Try adding "margin: auto;" to your div's inline style declaration.

Sorry about not responding sooner. My wife and I just had our first baby...May 27th.

I tried "margin:auto", but that did not work either.

Congrats!

The margin statement should be:

margin: 0 auto;

As that sets the top margin to 0, and the left/right to "auto", which centers the control, relative to any containing elements.

So my point is, "margin: 0 auto" is the proper way to center things in CSS, and if things aren't centering, look to see how you're nesting your controls.

This article has been dead for over six months. Start a new discussion instead.