Question

我正在创建一个水平菜单栏。

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

我使用float: left在这些内部div上设置样式，以水平显示而不是垂直显示。

问题是菜单栏的左右空间不均匀，因此整个菜单栏看起来并不集中......即左边的第一个菜单项距离左边框和空间的空间较小在右边框和右边框之间的最后一个菜单项之间更多。

我想在左右两侧使用相等的边距/填充，使菜单栏显示在中央。

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

已经看过这里：How to horizontally center a <div> in another <div>?

然而，这个特殊的答案是只集中一个div，我所拥有的是需要集中的水平div（菜单项）的集合。

感谢任何帮助。

Answer 1

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

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

DEMO

否则你需要一个具有固定宽度的内部元素的包装器：

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

DEMO

注意：在语义上，使用列表更好地设置菜单项的样式，就像在DEMO中一样。

Answer 2

首先，如果您的所有菜单项都指定了宽度并且display:inline是默认值，则不需要浮点数来排列它们。

但假设您这样做，当您设置浮动时，您的元素将从文档的自然流中移除，因此margin:auto将无法使其居中。在这种情况下，您可以做的是为菜单项创建另一个指定宽度的容器div，您可以在其中使用float对它们进行排列。现在剩下的就是将这个容器div放在你的外部div中，你已经看过如何解决它。例如，您可以使用容器 div上的margin:auto技术将其居中。确保外部div有text-align:center。

在外部Div中居水平div？

2 个答案: