我正在尝试将我的输入和 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 的顶部而不是中间。有人可以帮助我吗?谢谢。
最佳答案
CSS 中的 vertical-align 属性不符合您的预期。通常,内联元素可以通过 vertical-align: middle 在其上下文中垂直对齐。但上下文是它们所在文本行的高度,而不是父级。
关于css - div内的垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20134933/