居中 CSS 菜单/下拉菜单

Question

我在我的网站上使用这个模板：http://www.css3templates.co.uk/templates/CSS3_gallery_grey/index.html
jsfiddle：http://jsfiddle.net/uPw85/

我需要什么帮助：
1) 将菜单置于页面中心，您可以在链接中看到它是左对齐的。
2) 仍然保持下拉菜单中的文本向左对齐（就像上面的链接一样）。

在寻求帮助之前，我在此页面和 Google 上搜索了很多次，没有结果对我有用。我已经尝试了几乎所有发现的提示，但菜单仍然不会为我居中，唯一发生的事情是下拉菜单中的文本居中，但我想将其保持在左侧。

我在 CSS 中的不同位置（导航、菜单、li、ul）尝试了多种变体，但没有成功：

display: inline-block;
margin-left: auto;
margin-right: auto;,
margin: 0 auto;
text-align: center;
width: auto;

编辑 2/10，美国东部标准时间下午 1 点：感谢你们提供的帮助，但到目前为止，您给出的答案都没有帮助。

Answer 1

试试这个：

ul.sf-menu {
text-align: center;
}

ul.sf-menu li {
display: inline-block;
}

ul.sf-menu li a {
display: block;
}

ul.sf-menu ul {
text-align: left;
}

编辑：

我已经编辑了 JSfiddle：http://jsfiddle.net/uPw85/3/

编辑 2：

删除浮动：留在ul#nav中，或者只删除html中ul-tag中的id="nav"

Answer 2

为了使菜单居中，您需要将子 div 的宽度设置为小于父 div 的设置宽度。另外需要删除菜单的浮动，因为浮动元素有效地将其从父 div 中取出。

尝试设置以下内容：

ul.sf-menu {
  float: none;
  width: 760px;
  margin: 0 auto;
}

在检查元素时有效。另一种选择是尝试以下代码。

ul.sf-menu {
  float: none;
  display: table;
  margin: 0 auto;
}

Answer 3

只需添加：

ul#nav {
  float:left;
  padding-left: 80px;
}