html - 垂直对齐 float 元素

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

加入tabs-container line-height: 65px;