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