Javascript 将导航与徽标对齐

我有一个标题和一个标志在左边，然后一个导航在底部。我希望导航与徽标水平居中，但

底部

和

填充底部

不起作用。我把图像改成了文本，然后我可以做任何事情，但是用图像就不行了

HTML

<header class="cf">
    <div id="nav">
        <a href="#"><img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img></a>

        <div id="nav-list">
            <ul id="list">
                <a href="#"><li>HOME</li></a>
                <a href="#"><li>GALLERY</li></a>
                <a href="#"><li>ABOUT US</li></a>
                <a href="#"><li>SPONSORS</li></a>
                <a href="#"><li>ROSTER</li></a>
            </ul>
        </div>
    </div>
</header>

<section class="section one">
    <h2>One</h2>
</section>
<section class="section two">
    <h2>Two</h2>
</section>
<section class="section three">
    <h2>Three</h2>
</section>
<section class="section four">
    <h2>Four</h2>
</section>

JavaScript

$(document).on("scroll", function () {
    if ($(document).scrollTop() > 25) {
        $(".cf").addClass("small");
    } else {
        $(".cf").removeClass("small");
    }
});

---

另外，是一个演示。如果您需要更多信息，请告诉我。

您可能希望将它们浮动或内联到同一父div中

请注意，您有很多ID，但只在css类下定义样式。

添加：

.logo {
    float:left;
    width: 200px;
}

试试这个

<div id="nav">
    <div id="logo-box">
        <a href="#"><img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img></a>
    </div>
    <div id="nav-list">
        <ul id="list">
            <a href="#"><li>HOME</li></a>
            <a href="#"><li>GALLERY</li></a>
            <a href="#"><li>ABOUT US</li></a>
            <a href="#"><li>SPONSORS</li></a>
            <a href="#"><li>ROSTER</li></a>
        </ul>
    </div>
</div>

.logo {
    float:left;
    width: 200px;
}

<div id="nav">
    <div id="logo-box">
        <a href="#"><img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img></a>
    </div>
    <div id="nav-list">
        <ul id="list">
            <a href="#"><li>HOME</li></a>
            <a href="#"><li>GALLERY</li></a>
            <a href="#"><li>ABOUT US</li></a>
            <a href="#"><li>SPONSORS</li></a>
            <a href="#"><li>ROSTER</li></a>
        </ul>
    </div>
</div>

#nav{height: 100px; width: 100%; }
#logo-box{width: 300px; margin-left: 20px; float:left;}
#nav-list{margin-left: 360px; width:600px;} /*margin-left should be more than the 
 image-box width + image-box margin-left at least*/