垂直對齊問題內的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並將這兩個項目向右移動。

上面的代碼會得到我

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

我不知道如何浮動我input框和test按鈕向右。任何人都可以幫助我嗎？謝謝！

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; 
} 

Answer 2

這些標籤做的奇蹟：

display: inline-block; 
float: left; 
float: right; 

我認爲這是jfiddle你在找什麼： http://jsfiddle.net/LeBsN/1/