css - div内的垂直对齐问题

标签 css html

我正在尝试将我的输入和 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 boxtest button 并将这两个元素 float 到右边。

我试过添加

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

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

最佳答案

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

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

关于css - div内的垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20134933/

相关文章:

html - 为什么显示内联不起作用?

javascript - 背景颜色的 z-index 可能与 img 不同吗?

css - 如何使用 simple_form_for 更改 Rails 应用程序中文本区域的大小和位置?

列表悬停时的 CSS 箭头

html - 新页面链接到菜单栏,html

javascript - 如何在 Chrome 扩展程序卸载/禁用时清理网页

android - 选择输入文本字段时如何删除android中的边框?

html - 需要帮助将 div 与 CSS 对齐

css - ember-paper 中的侧边栏布局不起作用

html - 下拉菜单,z-index问题