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; 应该使您指定的元素居中。