CSS 菜单居中对齐

【问题标题】：CSS Menu central alignmentCSS 菜单居中对齐
【发布时间】：2013-08-13 20:44:10
【问题描述】：

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

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

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

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

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

div#menu

但我不确定

【问题讨论】：

你的意思是这样的？ fiddle.
谢谢。部分......它按照我的意愿拉伸，但我希望按钮像以前一样彼此相邻，如果你明白我的意思，只需在左右两边均匀地放置一个空白的红色块。居中并仅拉伸两侧的背景图像

【解决方案1】：

删除浮动并将其添加到<ul>：

width:100%;
text-align:center;

然后从 <li> 项中移除浮动元素并使其成为 inline-block 元素，因为它们是 inline-block 现在它们将响应父项的 text-align:center，并将居中：

display: inline-block;

小提琴：

【讨论】：