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

<nav>を整列させたい場合は、CSSでリストアイテムを整列させます。