Html CSS：在img和列表上垂直对齐

我已经构建了一个导航，我希望img和列表（

ul

，

li

）位于同一条线上（

垂直对齐：中间；

），但列表位于img上方。所以我的问题是，我怎样才能使两者都集中在同一条线上

HTML:

CSS:
#标志#主导航ul li{
显示：内联块；
浮动：左；
左缘：2.5%；
位置：相对位置；
垂直对齐：中间对齐；
}

---

我感谢每一个评论和帮助

在CSS中，您正在对齐列表项，而您希望对齐

是否使用boostrap？不，我是自己做的，所以我建议您使用table。所以，将同一条线和两条线对齐是更好的方法。，，u可以在单个标记中同时对齐两条线。因此，如果你不使用boostrap，这是最好的方法。这是有史以来最糟糕的使用表格导航的建议，给我一分钟，我会给你看。你的html/cssI有几个错误，我的网站快完成了，我自己也弄不清楚！谢谢你，成功了@这里有一个关于html/css的东西，比如你不必

float:left显示：内联块元素。我自动做到了。同样，浮动
li
u在
ul
上应该有一个
clearfix
类。只是一些提示；）
<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;
}