css - div内的垂直对齐问题

Question

我正在尝试将我的输入和 div 内的标签元素垂直对齐。

我有

<div id='title-container'>
       <img id='logo' src='images/topLogo.png'>
       <div id='search'><input type='text'><a id='btn' href='#'>test button</a></div>
</div>

我想显示类似的东西

--------------------------------------------------------------------
|    ---------------------------                             
|    |       topologic.png      |        my input box    test button                         
|    ---------------------------                        
|____________________________________________________________________

CSS

#title-container{ 
   height: 80px;
   vertical-align: middle;
   background-color: yellow;
}

#search{
   display: inline-block;
   vertical-align: middle;   
}

我想在我的 title-container div 中垂直对齐我的 input box 和 test button 并将这两个元素 float 到右边。

我试过添加

#search{
   display: inline-block;
   vertical-align: middle;   
   float:right;  
}

但这些元素将位于标题容器 div 的顶部而不是中间。有人可以帮助我吗？谢谢。

Answer 1

CSS 中的 vertical-align 属性不符合您的预期。通常，内联元素可以通过 vertical-align: middle 在其上下文中垂直对齐。但上下文是它们所在文本行的高度，而不是父级。

参见 http://phrogz.net/CSS/vertical-align/index.html