CSS列表项不居中

Question

我正在一个网站上工作，我有一个带有列表项的ul菜单。我希望项目在屏幕上居中。但似乎我的列表项目有一个烦人的偏移。见图片：

我的HAML）是这样构建的：

.menu
  %ul
    %li
      #- content

我的SASS）css看起来像这样：

.menu {
  text-align: center;
  margin-top: 2em;
  margin-bottom: 2em;

  ul {
    height: 30px;
    background-color: black;
    li {
      background-color: white;
      padding-top: 2em;
      .active_menu {
        border-top: 1px $red solid;
        a {
          color: $link-hover-color;
          margin-bottom: 10px;
        }
      }   
    }    
  }

  a {
    font-family: "ff-meta-web-pro",sans-serif;
    font-weight: normal;
    font-size: 22px;  
    &:hover {
      border-top: 1px $red solid;
    }
  }
}

ul li {
  list-style: none;
  display: inline;
  margin: 0 1em 0 1em;
  text-align: center;
  a {
    font-family: "ff-meta-web-pro",sans-serif;
    font-weight: normal;
    font-size: 22px;  
  }
}

如何让菜单/列表项目居中对齐？

Answer 1

您需要将包含ul和列表项的水平边距和填充重置为margin:0px;和padding:0px，然后在其下方定义所需的单个填充或边距。

在正确的位置使用margin:0px auto;也应该使您指定的元素居中。