Div没有与边距对齐：auto

Question

我试图在第二个答案this question之后将div放在另外两个人之间。然而，它没有工作，并且检查我的页面元素，我发现中心div的填充占据了整个屏幕的宽度，好像它包含了两个其他div。我通过设置display：inline-block解决了这个问题。填充现在是正确的，但div仍然没有居中。我忘记了什么吗？内联块选项是否不正确，因为它没有出现在我链接的答案中？代码如下。

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容器。