CSS 菜单居中对齐

Question

我正在尝试使用 CSS 创建一个菜单，但我对它的实际位置有疑问。

现在，无论我尝试什么，它总是在屏幕的左侧并且没有被拉伸(stretch)。我想把它放在中间，并可能拉伸(stretch)到屏幕的 100%。我尝试更改宽度参数、边距、文本对齐，但我总是得到与我想要的不同的东西，或者它根本不起作用。

菜单可以在这里看到: http://jsfiddle.net/98tW6/10/

正如我所说，我想要的只是将它放在页面的中央顶部并可能进行拉伸(stretch)，以便背景图像在顶部的整个屏幕上重复，按钮位于中央。

我认为关键行在这部分代码中:

div#menu

但我不确定

Answer 1

删除 float 并将其添加到 <ul> :

width:100%;
text-align:center;

然后从 <li> 中移除 float 元素并制作它们 inline-block元素，因为它们是 inline-block现在他们将回应 text-align:center parent 的，并将居中:

display: inline-block;

fiddle :

http://jsfiddle.net/98tW6/17/