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