html - 如何居中对齐包含没有固定宽度的 float 的div

Question

我在包装器 div 中有一个 ul 菜单。每个 li 元素都有 float:left(这是一个水平菜单)。我想将菜单居中放置在我的页面容器中(大约 1100 像素)，但我不知道菜单的大小，所以我不能使用“margin:0 auto”。

我尝试了很多不同的东西，但就是无法让它发挥作用。

这是wordpress中的一个菜单，所以ul和wrapper div的标记是由wordpress生成的。宁愿不要惹那个......

Answer 1

您可以定义容器 display:inline-block 并通过设置属性 text-align:center 将文本对齐到容器的中心，如下所示:

CSS

.nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
}

.nav {
    text-align:center;
}