如何实现此导航栏布局？

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