垂直对齐浮动元素

飞猫

我正在尝试将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;
}

它实际上是行不通的。结帐未垂直对齐。

大卫·阮

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章