导航菜单的 CSS 居中问题答案

【问题标题】：CSS Centering Issue for Navigation Menu导航菜单的 CSS 居中问题
【发布时间】：2011-08-12 12:21:31
【问题描述】：

我需要一些 CSS 编码方面的帮助。我一直试图让这个导航菜单以页面为中心，无论我做什么，我都无法让它工作。我尝试过 padding-left、margin-left、text-align:center，但没有任何效果。菜单继续保持在左侧而不是右侧。

这里是问题的截图：http://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg

我确定这很简单，但我似乎无法弄清楚我做错了什么？

这是页面的实时链接： http://blacktiphfishing.org/test.html

非常感谢任何帮助！

【问题讨论】：

你能发布你的css吗？

标签： css menu navigation center

【解决方案1】：

如果你删除了

margin:0; 来自#nav

它看起来居中。

在 Chrome 中测试

【讨论】：

【解决方案2】：

首先为#nav, #nav ul 添加overflow:hidden 以清除浮动。然后加上margin:0 auto。但是这个总是需要一个固定的宽度，所以设置它，例如：width:760px 所以新的css是：

#nav, #nav ul {
    list-style: none outside none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 760px;
    z-index: 30;
}

【讨论】：

@VAShhh 我写给#nav 所以在这种情况下是 (150px+2px)*5 = 760px
感谢您的帮助。试了你的代码，发现overflow:hidden导致子菜单不显示？
@Joshua Jorgensen 如果你不清除浮动，那么设计就会“中断”并产生你遇到的问题

【解决方案3】：

CSS 布局有时会让人有些头疼。尝试在 chrome 中使用“检查元素”或在 firefox 中使用firebug 来启用/禁用和更改样式以进行微调

【讨论】：

【解决方案4】：

如果您想达到正确的居中布局，您需要指定MainMenu div 的确切宽度并将其左右边距设置为自动。

确切的宽度是 780px (150px * 5 (每行 5 个链接) + 10px * 2 (10px 左 + 10px 右边框）+ 2px * 5（每里的右边距））

使用这个css：

#mainMenu {
    background: none repeat scroll 0 0 #000000;
    border: 10px solid #000000;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 780px;
}

使导航部分居中

【讨论】：

感谢您的帮助。我使用了您的代码，并且导航菜单没有完全居中。菜单更靠左，而不是靠右。我改变了：宽度：780px；到宽度：760px；导航菜单完美居中。请问您为什么要在后台添加更多代码？
我没有添加任何代码，您看到的代码是由 firebug 提供的-实际上background 指令非常无用，我添加的东西是fixed width 和@987654325 @;) 很高兴它成功了，别忘了批准你的问题的解决方案！
我如何批准解决方案？我是这个网站的新手，我不熟悉格式。