垂直对齐浮动元素

Question

我正在尝试垂直对齐我的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
|_________________________________________________________

我想要上面的东西。

我的css。

#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;
}

它确实不起作用。结帐不是垂直对齐的。

Answer 1

添加到标签 - 容器line-height: 65px;