让孩子排成中间或中间

Question

JS小提琴here

我试图在左右之间均匀地对齐子元素。我尝试使用margin-left和right：auto但没有发生任何事情。

以下是相关导航的屏幕截图。我在每个元素周围添加了1 px的边框，以便您可以看到：

我希望将导航线项目与其父级进行比较。因此，在图像中，行项目将向右移动一点，使其居中于父矩形之间，这是一个无序列表。

以下是相关html的近似值：

<nav>
  <div id="main-nav">
     <ul id="menu-main">
       <li>cats</li>
       <li>dogs</li>
       <li>sheep</li>
      </ul>
  </div>
</nav>

目前相关（我认为）CSS是：

#main-navigation {
display: inline;
float: left;} 

#main-navigation div {
display: block;}

#menu-main {
position: relative;
float: left;}

#menu-main li {
float: left;
}

换句话说，我想把浮动的子元素放在父母的中心。如果我使用浏览器放大和缩小，我可以看到导航器调整和更改大小，一些行项目在顶行和底行之间移动以适应。

但有没有办法确保无论目前的导航尺寸如何，子行项目都会居中？

这是另一张图片，我手动为＃menu-main添加了一个边距。

现在它看起来更加集中在我的屏幕上。但有没有办法让它自动居中？

Answer 1

请参阅：http://jsfiddle.net/rahjrLny/1/

您不需要浮动li元素，只需将它们设置为display:inline即可。然后，您可以将text-align: centre添加到ul元素中，一切都应该是好的。

（您需要删除由于更改而出现在小提琴中的一些边距）

Answer 2

这将是我的解决方案：JSFiddle

有一些冗余的CSS（例如，如果您在#main-navigation div {display: block;}内没有任何div元素，则无需指定#main-navigation。

我已经使用display:inline-block而不是display:inline（为了视觉清晰，还添加了一些颜色边框）。请记住，我正在使用您在问题中提供的代码，而不是从屏幕截图中构建代码。

nav {display:inline-block; width:100%;}

#main-nav {
    float:left;
    width:100%;
} 

ul#menu-main {
    margin:0;
    padding:0;
    text-align:center;
    width:100%;
    float:left;
}

#menu-main li {
    list-style: none;
    padding: 0.5em;
    display:inline-block;
}

编辑：在我观察到提供了一个小提琴之前我回答了这个问题，而是从问题中提供的代码开始工作。对于OP而言，这可能不是正确的答案，但我现在暂时不管它，因为我相信它提供了一个有效的例子，说明如何处理导航列表居中的任务。