如何将下拉菜单居中在父选项卡下方？

Question

我有以下CSS/HTML设置 http://jsfiddle.net/UDAUY/ 如何使下拉菜单字段自动居中在父选项卡下方，就像这样

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
    | Field 1 | Field 2 |
    ---------------------

与其这样，

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
         | Field 1 | Field 2 |
         ---------------------

这是当前的样子。另外，我能否动态调整子菜单ul容器的宽度？现在，我将其设置为任意高的值，这在实际应用中很有效，但想知道是否可能通过CSS实现动态调整。

编辑：我增加了赏金以吸引更好的答案。我寻求一种仅使用CSS（无JS）和相对单位的方法。此外，字段数量不应该影响居中对齐（您不必担心极长/换行问题...但是，从2个到4个的更改不应改变居中对齐）。

- user564376

---

我已经修复了width: 300%的使用，但是动态居中还是有点困难 :P - thirtydot

你是否避免使用Javascript？我相信这可以通过一些jQuery的定位来实现，但是我的CSS已经有些生疏了 :) 我也看到一些非常棒的超级鱼菜单插件。 - jbrookover

你需要支持哪个最老的浏览器？IE8？IE7？ - thirtydot

@jbrookover：嗯，我试图保持纯CSS/HTML，因为很多人禁用了js。 - user564376

如果这是我的项目，我会为没有JavaScript的人安排一个左（或右）定位菜单，并为具有JavaScript的人安排一个中心定位菜单。这绝对是最简单的解决方案。在CSS中，相对于其他元素居中对齐非常棘手。 - Effata

Answer 1

这是一个纯CSS居中的代码，已经“几乎”完成。

http://jsfiddle.net/gNanu/

它适用于动态数量的子菜单项，并且只要我们在包装器上有显示：块，它就会正确居中。一旦我们删除并隐藏子菜单，它就有点歪了。我会再看看，看看能否做些其他的事情。

编辑：

这可能是您可以使用CSS做到的最好的效果。 http://jsfiddle.net/gNanu/4/ 有时它不完全居中，我还没有进行任何跨浏览器测试。

- Effata

---

看起来不错...我遇到的问题也是如何将它隐藏起来。期待您的建议/修复。 - user564376

你可以使用 visibility:hidden 和 visibility:visible 来显示/隐藏元素。 - andyb

我对这个进行了一些尝试，但它仍然无法完美居中。似乎在定位之后还会应用一些边距或填充。 - Effata

谢谢，Effata。你的解决方案看起来不错。享受100个声望值 :) - user564376

很高兴我能帮忙，虽然不是完美的。但经过一些改进，它可能会非常好... :) - Effata

Answer 2

http://pmob.co.uk/pob/centred-float.htm

（使用display：inline;和text-align：center;也可以，但它有自己的缺点）

- reisio

Answer 3

尝试...

menu {text-align:center}
fieldwrapper {margin:0 auto;}
field {}

- rand0mmm

Answer 4

#menu .submenu {
position: absolute;
display: none;
top: 19pt;
width:300%;
margin: auto;
left: -100%;
text-align:center;
}

.submenu li {
background-color: #000;
margin-right: 1.5%;
padding-right: 3%;
padding-left: 3%;
margin: 0 auto;
display: inline-block;
}

这就是让我成功的原因。希望这是你寻找的答案，因为我刚加入并没有阅读所有答案... 直接投入其中。

- Luuk

---

我喜欢你的解决方案，因为它简单且对原有内容的更改最小。然而，如果li的数量增加，这会引入第二行。添加white-space:nowrap可以解决这个问题，但是它不再居中。我认为这需要像Effata所做的那样使用div。无论如何，当li的数量较少时，这个解决方案是可接受的，+1。 - user564376

Answer 5

我添加了：

#menu .submenu {
    position: absolute;
    display: none;
    top: 19pt;
    left: -25%;
    width:300%;
    margin: auto;
}

不确定在所有浏览器中都能完美运行。顺便说一句，这是一个很好的提问方式...

- Luke Lowrey

---

那样做是行不通的，因为它需要向左移动 (width(child)-width(parent))/2。这似乎有效，因为父元素的大小大约是子元素大小的一半。如果您再添加一个字段并尝试此操作，则无法正常工作。 - user564376

在这种情况下，您可能需要使用JavaScript解决方案。 - Luke Lowrey

Answer 6

父元素需要设置为position:relative，子元素设置为absolute，并且子元素必须在父元素内部。通过控制子元素的top:（top必须包括父元素的高度）和left:，您可以控制它的位置。如果您想要居中，则需要使用：top: [parentheight]; left: 0; 希望能帮到您 :)

- Robik

---

这并不会使子菜单居中或对解决方案有所贡献。 - Effata