css - 在外部 Div 内居中水平 div？

Question

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

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

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

问题是菜单栏左右两侧的空间不均匀，因此整个菜单栏似乎没有集中......即左边的第一个菜单项与左边框和空间的距离较小右边最后一个菜单项和右边框之间有更多内容。

我希望左右边距/填充相等，以使菜单栏显示在中央。

我尝试设置 margin-left: auto; margin-right: auto 在外部 div 上，然后在内部 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 中一样。