CSS 边距 :auto unequal

Question

我正在尝试让菜单栏居中。我的代码是:

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

左右两边不相等。我完全不知道为什么菜单左边的空间比右边的多。您可以在此处查看页面:http://www.ruthbavetta.com/sample

Answer 1

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

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

.menu 的宽度为 900px。

.menu {
    width: 900px;
}

如果你想让它居中，你需要减少菜单的宽度。或者使用 100% 的宽度来填充容器元素的整个空间。