html - CSS:在 img 和列表上垂直对齐

Question

我构建了一个导航，我希望 img 和列表 (ul,li) 居中在同一行 (vertical-align:middle ;) 但列表在 img 之上。所以我的问题是，如何让两者都集中在同一条线上？

HTML:

<div id="logo">
    <a href=""><img src=""></img></a>
</div>

<nav id="main-nav">
    <ul>
        <li>
            <a href=""></a>
        </li>
    </ul>
</nav>

CSS:

#logo, #main-nav ul li {
    display: inline-block;
    float: left;
    margin-left: 2.5%;
    position: relative;
    vertical-align: middle;
}

我感谢每条评论和帮助!

Answer 1

在您的 CSS 中，您正在对齐列表项，而您想要对齐 <nav> .