Question

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

我需要帮助：
1）将菜单置于页面中心，正如您在左侧对齐的链接上看到的那样 2）仍然将文本保留在左侧对齐的下拉菜单中（就像上面的链接一样）。

我在寻求帮助之前搜索过这个页面并在Google上搜索了很多， none 的结果对我有用。我已经尝试了我发现的每一个提示，但菜单仍然不会以我为中心，唯一发生的事情是下拉菜单中的文本居中，但我想将它保持在左侧。

我在CSS中尝试了不同地方（nav，menu，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中取出。

尝试设置以下内容：

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;
}

居中CSS菜单/下拉菜单

3 个答案: