【问题标题】: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 @;) 很高兴它成功了,别忘了批准你的问题的解决方案!
      • 我如何批准解决方案?我是这个网站的新手,我不熟悉格式。
      猜你喜欢
      • 1970-01-01
      • 2012-12-30
      • 2011-08-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-12-24
      • 2014-10-26
      • 1970-01-01
      相关资源
      最近更新 更多