在外部div中水平居中内部div？

Question

我正在创建一个横向菜单栏。

外部div包含内部div（每个div都是单独的菜单项）。

我使用float: left对这些内部div进行样式设置，以便将它们水平显示而不是垂直显示。

问题在于菜单栏左右两侧的空间不均匀，因此整个菜单栏看起来并不居中...即左侧第一个菜单项与左边框的距离较小，而右侧最后一个菜单项与右边框之间的距离更大。

我想要在左右两侧具有相等的边距/填充，以使菜单栏显示在中心位置。

我尝试在外部div上设置margin-left: auto; margin-right: auto，然后也在内部div上设置了。但两者似乎都没有帮助。

已经查看了这里：如何在另一个

中水平居中

？ 但是这个特定的答案是将一个div居中，而我拥有的是一组需要居中的水平div（菜单项）。

感谢任何帮助。

- user481913

---

你能否制作一个演示，展示一下你目前的进展情况？[（http://jsfiddle.net/）] - thirtydot

Answer 1

如果您的菜单项不复杂（例如没有固定大小或子元素），请尝试添加以下样式：

#outer {
    text-align: center;
}
.menu-item {
    display: inline; /* replace 'float:left' with this */
}

• 演示

否则，您需要为具有固定宽度的内部元素创建一个包装器：

#wrapper {
    margin: 0 auto; /* center in outer DIV */
    width: /* sum of widths of inner elements */;
}

• 演示

注意:从语义上讲，使用列表来样式化菜单项会更好，就像演示中的那样。

- calebds

---

谢谢，看起来可以了...现在试着在每个菜单项之间放置一些间隔... - user481913

第二个演示应该展示如何使用 margin: 0 Npx;，如果选择第一种选项。 - calebds

我刚刚对每个菜单项的样式应用了margin-left:5px; margin-right:5px来调整空间，效果不错，感谢您的帮助。 - user481913

Answer 2

首先，如果您的所有菜单项都指定了宽度并且使用默认的display:inline，则不需要使用浮动来对齐它们。

但是假设您确实需要使用浮动，那么当您设置浮动时，元素将从文档的自然流中移除，因此margin:auto将无法使其居中。在这种情况下，您可以创建另一个指定宽度的容器div用于菜单项，在其中使用float来对齐它们。 现在剩下的就是将这个容器div居中在外部div中，您已经知道如何解决了。例如，您可以在container div上使用margin:auto技术来使其居中。确保您的外部div具有text-align:center。

- Abhranil Das