Question

我是网络开发的新手。我试图让导航栏在页面上水平居中，尝试在这里查看其他类似的问题，但我仍然无法实现。提前谢谢。

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

Answer 1

将此添加到父元素CSS：

margin:0 auto;

Answer 2

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

Answer 3

我已回复here - 您可以inline-block添加ul

在你的css中更改这些

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

如何水平居中导航栏？

3 个答案: