Question

我一直很难尝试将无序的内联元素放在div的中心。

我需要帮助才能做到这一点。

    <div class="column">
<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">For Sale</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Vehicles</a></li>
  <li><a href="#">Classes</a></li>
  <li><a href="#">Real Estate</a></li>
  <li><a href="#">Sevices</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Personals</a></li>
  <li><a href="#">Jobs</a></li>
 </ul>
</div>

另一种不起作用的方式。通过采用浮动中心规则

出售

项目1A

    </ul>
  </li>
  <li><a href="#">Vehicles</a></li>
  <li><a href="#">Classes</a></li>
  <li><a href="#">Real Estate</a></li>
  <li><a href="#">Sevices</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Personals</a></li>
  <li><a href="#">Jobs</a></li>
 </ul>
</div>

使用原始html / css时，将ul元素移动到DIV的中心会更容易。当我添加zurb基础标签/规则时，菜单项移动到DIV的左侧。我已经尝试了所有方法来使这些居中，但我不能。有任何想法吗？感谢

Answer 1

您遇到的问题是ul元素的display属性值为block。这导致ul的宽度与父div的宽度一样大。

您可以在ul元素中添加一个类，将显示属性更改为内联块，并将文本中心类添加到父div为中心内容。

以下是codepen http://codepen.io/MKallivokas/pen/ONbYYV的链接：

<强> HTML：

<div class="column text-center">
<ul class="dropdown menu custom-menu" data-dropdown-menu>
  <li>
    <a href="#">For Sale</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Vehicles</a></li>
  <li><a href="#">Classes</a></li>
  <li><a href="#">Real Estate</a></li>
  <li><a href="#">Sevices</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Personals</a></li>
  <li><a href="#">Jobs</a></li>
 </ul>
</div>

<强> CSS：

.custom-menu {
    display: inline-block;
}

Answer 2

您可以使用.text-center课程或margin: 0 auto;

吗？

Zurb Foundation：如何在DIV中居中ul菜单列表

2 个答案: