如何水平居中导航栏？答案

【问题标题】：How do I center my navigation bar horizontally?如何水平居中导航栏？
【发布时间】：2013-06-11 05:35:53
【问题描述】：

我对 Web 开发还很陌生。我试图让导航栏在页面上水平居中，尝试在这里查看其他类似的问题，但我仍然无法实现。提前致谢。

www.livewasteless.com

我的 CSS：

#mainNav{   
 background: #fff;
 height:40px;   

}

#mainNav li{
 float: left;
 list-style-type: none;
 z-index: 50;
 border-right: 1px solid #eee;
}

#mainNav li:last-child { border-right: 0; }

#mainNav ul a{
 display: block;
 text-decoration: none;
 padding-left: 28px;
 padding-right: 28px;
 padding-top: 15px;
 padding-bottom: 15px;
 font-size: 12px;
 color: #333333;
 font-weight: bold;
 text-transform: uppercase;
 height: inherit;
}

#mainNav ul ul a{
 line-height: 15px;
 font-weight: normal;
 border-top: none;  
}

我的 HTML：

                <!-- BEGIN NAV WRAP --> 
            <div class="nav-wrap">



                <!-- BEGIN MAIN NAV FULL -->
                <div class="main" id="mainNav">

                        <ul id="menu-nav-menu" class="sf-menu"><li id="menu-item-696" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-696"><a href="http://www.livewasteless.com/services/">Services</a></li>
<li id="menu-item-695" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-695"><a href="http://www.livewasteless.com/projects/">Projects</a></li>
<li id="menu-item-829" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-829"><a href="http://www.livewasteless.com/resource-center/">Resource Center</a>
<ul class="sub-menu">
    <li id="menu-item-685" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-685"><a href="http://www.livewasteless.com/legislation/">Legislation</a>
    <ul class="sub-menu">
        <li id="menu-item-686" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-686"><a href="http://www.livewasteless.com/legislation/ab-1103/">AB 1103 &#8211; Energy Star Benchmark</a></li>
        <li id="menu-item-687" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-687"><a href="http://www.livewasteless.com/legislation/ab-1881/">AB 1881 &#8211; Landscape Water Conservation</a></li>
        <li id="menu-item-688" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-688"><a href="http://www.livewasteless.com/legislation/ab-531/">AB 531 &#8211; Energy Consumption Disclosure</a></li>
        <li id="menu-item-689" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-689"><a href="http://www.livewasteless.com/legislation/ab-758/">AB 758 &#8211; Energy Audits</a></li>
        <li id="menu-item-691" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-691"><a href="http://www.livewasteless.com/legislation/ab-920/">AB 920 &#8211; Surplus Solar Generation</a></li>
        <li id="menu-item-690" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-690"><a href="http://www.livewasteless.com/legislation/ab-811/">AB 811 &#8211; PACE Financing</a></li>
        <li id="menu-item-692" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-692"><a href="http://www.livewasteless.com/legislation/calgreen/">CALGreen</a></li>
        <li id="menu-item-693" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-693"><a href="http://www.livewasteless.com/legislation/carbon-reduction-surcharge/">Carbon Reduction Surcharge</a></li>
        <li id="menu-item-694" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-694"><a href="http://www.livewasteless.com/legislation/sb-32/">SB 32</a></li>
    </ul>
</li>
</ul>
</li>
<li id="menu-item-682" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-682"><a href="http://www.livewasteless.com/about/">About Us</a></li>
<li id="menu-item-799" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-799"><a href="http://www.livewasteless.com/contact/">Contact</a></li>
<li id="menu-item-683" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-683"><a href="http://www.livewasteless.com/affiliations/">Affiliations</a></li>
<li id="menu-item-802" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-802"><a href="http://www.livewasteless.com/posts/">Blog</a></li>
</ul>               
                <!-- END MAIN NAV FULL -->

【问题讨论】：

能否给我们看看你的 HTML，拜托 Corey？
当前行为是什么
我尝试添加 HTML，但我不知道如何在此处格式化：/ 不过我会学习的，抱歉。
@CoreyStarbird 你的意思是让#mainNav水平在 HTML 文档中居中吗？
是的，我想让导航栏元素水平居中，而不是向左浮动。

标签： css

【解决方案1】：

正如我已回答here - 您可以将inline-block 添加到ul

在你的 CSS 中更改这些

#mainNav{   
 background: #fff;
 height:40px;   
 text-align:center;
}
ul#menu-nav-menu{
 display: inline-block;
}

【讨论】：

谢谢，但我对第二个元素的名称感到困惑
这是针对您的ul，您也可以使用#mainNav ul{display: inline-block;}
工作！感谢您的帮助！

【解决方案2】：

将此添加到父元素 CSS：

margin:0 auto;

【讨论】：

如果没有width 属性声明，则不能以这种方式居中。

【解决方案3】：

    #mainNav{
      margin:0 auto;
      width:70%
   }

【讨论】：