Question

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

以下是问题的屏幕截图：http://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg

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

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

非常感谢任何帮助！

Answer 1

如果删除

来自margin:0;

的

#nav

它看起来居中。

在Chrome中测试

Answer 2

首先为overflow:hidden添加#nav, #nav ul以清除浮点数。然后添加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;
}

Answer 3

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

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

使用此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;
}

使导航部分居中

Answer 4

CSS布局有时会让人头疼。尝试在chrome中使用'inspect element'或在firefox中使用firebug来启用/禁用和更改样式以进行微调调整

导航菜单的CSS居中问题

4 个答案: