html - 带有 float 元素的 div 内的垂直对齐问题

Question

我正在尝试使我的 input 和 div 内的标记元素垂直居中。

我有

<div id='title-container'>
        <div id='logo'><img src='images/topLogo.png'></div>
       <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;
  width: 980px;
  background-color: yellow;
  display: table-cell;
  vertical-align: middle;
}

#logo{
  display: table-cell;
  margin: 10px;
}
#search{
  display: table-cell;
  text-align: right;
  margin: 10px;
  vertical-align: middle;
}

我想在我的标题容器 div 中垂直对齐我的输入框和测试按钮，并将这两项 float 到右侧。

上面的代码会让我明白

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

我不确定如何将我的input 框和test 按钮 float 到右侧。谁能帮我解决这个问题？谢谢!

Answer 1

 #title-container{ 
    height: 80px;
   width: 980px;
   background-color: yellow;
   display: table-cell;
   vertical-align: middle;
 }

 #logo{
   display: table-cell;
   margin: 10px;
 float:left;
 }
 #search{
   display: table-cell;
   text-align: right;
   margin: 10px;
   vertical-align: middle;
 float:right;
 }