CSS边距：自动不等

Question

我正试图让菜单栏居中。我的代码是：

.menu
{
    display: block;
    margin-right: auto;
    margin-left: auto;  
    position:relative;
    top: -25px;
    height: 40px;
    width: 900px;
   background-color: #BFBFBF;
   text-align: center;
}

权利＆amp;左边是不平等的。我完全不知道为什么菜单左边比右边有更多的空间。您可以在此处查看页面：http://www.ruthbavetta.com/sample

Answer 1

这是因为元素.menu的宽度大于容器内容框的宽度。 容器.content周围有10px的填充，宽度为895px。

.content {
  width: 895px;
  padding: 10px;
}

.menu的宽度为900px。

.menu {
    width: 900px;
}

如果要将菜单放在中心位置，则需要缩小菜单的宽度。或者使用宽度100%填充容器元素的整个空间。