Div 未与 margin:auto 对齐

Question

在对this question 的第二个回答之后，我正试图在其他两个 div 之间居中。但是，它不起作用，检查我的页面元素，我发现中心 div 的填充占据了整个屏幕的宽度，就好像它包含其他两个 div 一样。我通过设置 display:inline-block 解决了这个问题。现在填充是正确的，但 div 仍然没有居中。我是不是忘记了什么？ inline-block 选项是否不正确，因为它不存在于我链接的答案中？代码如下。

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