帶有浮點元素的div內的垂直對齊問題

Question

我正在嘗試將input和div中的tag元素的中間垂直對齊。

我有

<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/