css - 让 children 排成中间或中间

Question

JS fiddle 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;
}

换句话说，我想让 float 的子元素相对于父元素居中。如果我用我的浏览器放大和缩小，我可以看到导航调整和改变大小，一些行元素在顶行和底行之间移动以适应。

但有没有办法确保无论导航的当前大小如何，子行元素都将居中？

这是另一张图片，我在其中手动添加了#menu-main 的边距。

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

Answer 1

看这个:http://jsfiddle.net/rahjrLny/1/

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

(由于更改，您需要删除 fiddle 中出现的一些边距)