如何使我的下拉菜单项居中？答案

【问题标题】：How can I center my dropdown menu items?如何使我的下拉菜单项居中？
【发布时间】：2018-07-19 18:21:23
【问题描述】：

我正在开发一个投资组合网站模板，该模板将在 >= 1024 像素的显示器上显示左侧的垂直全高菜单，并在移动显示器上显示水平全宽下拉菜单。问题是我的下拉菜单项（文本本身，而不是下拉菜单）稍微向右偏移而不是居中。我玩过我的 CSS，但我似乎无法弄清楚。有人可以帮忙吗？

$('#nav-status').click(function(e) {
  e.preventDefault();
  $('#navigation').toggle();
});

html,
body {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/wood-dark.png");
  overflow-x: hidden;
  font-family: "Oswald", sans-serif;
  color: white;
  text-align: center;
}


/*mobile rules*/

@media screen and (max-width: 1023px) {
  #nav-status {
    display: block;
    width: 100%;
    height: 32px;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.75);
  }
  ul {
    display: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    overflow: hidden;
    color: white;
  }
  li h1 {
    font-size: 1.5em;
  }
  ul li {
    width: 100%;
    min-height: 32px;
    padding: 2px;
    display: block;
    position: relative;
    text-align: center;
  }
  li a:link,
  a:visited,
  a:active {
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-decoration: none;
  }
  li a:hover {
    color: #ba1d30;
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-decoration: none;
  }
}


/*desktop rules*/

@media screen and (min-width: 1024px) {
  #nav-status {
    display: none;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 20%;
    background-color: rgba(0, 0, 0, 0.85);
    height: 100%;
    position: fixed;
    overflow: hidden;
  }
  li h1 {
    font-size: 3em;
  }
  ul li {
    color: white;
    margin: auto;
    width: 50%;
    padding: 2px;
  }
  li a:link,
  a:visited,
  a:active {
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 2em;
    text-decoration: none;
  }
  li a:hover {
    color: #ba1d30;
    font-family: "Oswald", sans-serif;
    font-size: 2em;
    text-decoration: none;
    font-style: italic;
  }
}

<body>
  <div>
    <a href="#" id="nav-status"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png" alt="Kissy Cat"></a>
    <ul id="navigation">
      <li>
        <h1>Explore</h1>
      </li>
      <li>
        <a href="#">Web Pages</a>
      </li>
      <li>
        <a href="#">Games</a>
      </li>
      <li>
        <a href="#">Productivity</a>
      </li>
      <li>
        <a href="#">Project 4</a>
      </li>
    </ul>
  </div>
</body>

Here is a link to my Codepen in case that helps.

【问题讨论】：

标签： css menu alignment dropdown

【解决方案1】：

您的ul 元素有一些填充。

只需ul { padding : 0; }。就是这样。

【讨论】：

你太棒了！我一直在寻找 24 小时的解决方案！非常感谢！
哈哈，没问题，@Valsburger :) 标记为正确答案，好吗？ :D
我已经这样做了两次，我想是因为我只有 3 个声望没有显示？
啊，是的，我也这么认为。没关系。但是，一旦您的网站启动并运行，请告诉我！ :)