Div不能与margin：auto对齐

Question

I'm trying to center a div between two others following the second answer to this question . However, it doesn't work and, inspecting my page's elements, I found out the center div's padding is taking up the whole screen's width, as if it were containing the two other divs. I solved that by setting display:inline-block. The padding now is correct, but the div is still not centered. Did I forget something? Is the inline-block option incorrect, since it wasn't present in the answer to which I linked? Code follows.

HTML:

<div class="menu" id="left-menu">
<div class="menu" id="right-menu">
<div class="main-col">
    <canvas id="my-canvas" width="800" height="600"></canvas>
/div>

CSS:

#left-menu
{
float:left;
margin-right:15px; /*won't be needed if the center div is well positioned*/
}
#right-menu
{
float:right;
margin-left:15px; /*won't be needed if the center div is well positioned*/
}
#main-col
{
margin-left: auto;
margin-right: auto;
    display:inline-block;
}

Answer 1

将display:inline-block更改为display:block或将text-align:center添加到#main-col容器。