html - 使用 wrapper 将 nav ul 居中

Question

我正在使用

• 制作菜单。我想水平放置它并使整个 UL 居中，但它看起来不起作用，ul 没有在包装器上以 margin-auto 居中

  <div id="wrap">
  <nav>
  <ul>
      <li class="menuitem">Menu</li>
      <li class="menuitem">Menu</li>
      <li class="menuitem">Menu</li>
      <li class="menuitem">Menu</li>
      <li class="menuitem">Menu</li>
  </ul>
  

      .menuitem {
  background-color: #E3E3E3;
  float: left;
  width: 100px;
  height: 90px;
  list-style-type: none;
  text-align: center;
  color: black;
  display: inline;
  }
  
  #wrap {
      margin: 0 auto;
  }
  

  这是 fiddle

Answer 1

你应该给你的 .menu-nav 一个固定的宽度，例如 width: 200px; 否则 margin: auto 不起作用。

您的 .menuitem 类中也有 text-align: center; 属性。 这使文本居中。 如果您不希望文本在菜单中居中，请将其删除。

---

要获取有关 css 中更高级居中方法的更多信息，请阅读此 blog post about css centering