如何实现此导航栏布局？

Question

我想使用HTML和CSS来实现这种布局，但我没有得到任何地方。我尝试了这样的事情：

ul#nav-links-left 
    Home 
    Schedule 
    Course & Venue 

ul#nav-logo-center 
    Image of logo 

ul#nav-links-right 
    Awards 
    Results 
    Contact 

并分别将它们左移，中移和右移 - 没有工作。我也尝试过这样的事情：

ul 
    Home 
    Schedule 
    Course & Venue 

    Image of logo 

    Awards 
    Results 
    Contact 

但我无法让徽标位于页面的中心位置。

徽标必须位于页面的中心，链接的左右部分必须具有相同的宽度，并且链接必须均匀分布。

任何提示？

Answer 1

div#nav-parent{position:relative;} ul#nav-logo-center{position:absolute;top:0;left:50%;margin-left:-35px;} 

“-35px” 是图像

Answer 2

我从this post适应解决方案的宽度的一半：

HTML：

<div id="nav-links-left"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Schedule</a></li> 
     <li><a href="#">Course & Venue</a></li> 
    </ul> 
</div> 

<div id="nav-links-right"> 
    <ul> 
     <li><a href="#">Awards</a></li> 
     <li><a href="#">Results</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

<div id="logo-center"> 
    <a href="#"><img src="logo.png"></a> 
</div> 

CSS：

#nav-links-left { 
    float: left; 
    width: 50%; 
    padding: 0 ($logo-width/2) 0 0; 
    height: $logo-height; 
} 

#nav-links-right { 
    float: right; 
    width: 50%; 
    padding: 0 0 0 ($logo-width/2); 
    height: $logo-height; 
} 

#logo-center { 
    width: $logo-width; 
    height: $logo-height; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin: 0 0 0 (-$logo-width/2); 
    text-align: center; 

    img { 
     height: $logo-height; 
     width: auto; 
    } 
}