Html 垂直对齐浮动图元

我试图垂直对齐我的ul标签和div内的标签

我有点像

 <div id='tabs-container'>
       <ul id='tabs'>
        <li><a href='#'><img src='images/homeBtn.png'</a></li>
       <li><a href='#'>task</a></li>
       <li><a href='#'>result</a></li>
       <li><a href='#'>Store</a></li>
       </ul>
       <a id='grade-btn' href='#'>checkout</a>
  </div>

----------------------------------------------------------
|
|   img task result store                       checkout      <- vertically align inside a div
|_________________________________________________________

---

这真的不管用。签出未垂直对齐。

添加到选项卡容器

行高：65px
可能重复您最近提出的另外两个问题：@FlyingCat我可以试着解释一下，btn受容器字体高度的限制，将线条高度设置为div的总高度，使其可以自由移动。线条高度被一分为二，然后应用于元素的顶部和底部，使元素处于垂直中间。添加
行高：65px
会强制子级占用65px的空间。因为这与父对象的高度相匹配，所以它们是垂直居中的。
#tabs-container{      
    height: 65px;
    position: relative;
    vertical-align: middle;
}

#tabs{
   float: left;
}

#tabs li{
    vertical-align: middle;
    display: inline-block;
    background-color: black;
    margin: 15px;
    vertical-align: middle;
}

#grade-btn{
   vertical-align: middle;
   display: inline-block;
   color: white;
   float: right;
}