垂直對齊浮動元素

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;