如何在這種情況下使用垂直對齊

Question

首先看截圖。

正如你在前面的圖片中看到，在左邊的是更多的話到頂部，而合適的話，在右邊的是更多的底部，我試圖用vertical-align但沒有工作得很好。 [jsFiddle]
我想要的是左邊和右邊的單詞與文本框垂直對齊。

HTML

<div id="top_nav"> 
    <div id="top_nav_container" class="clear"> 
     <div id="top_nav_left" class="float_left"> 
      <span> 
       <a href=""> Message </a>&nbsp; 
       <a href=""> Reputation </a> 
      </span> 
     </div> 
     <div id="top_nav_right" class="float_right"> 
      <span> 
       <a href=""> Login </a>&nbsp; 
       <a href=""> SignUp </a> 
      </span> 
      <span id="top_nav_search"> 
       <form action="" method="get"> 
        <input type="text" name="search" id="search" /> 
       </form> 
      </span> 
     </div> 
    </div> 
</div> 

CSS

input[type='text'], input[type='password'] {min-width:200px; padding:5px; color:#4F5155;} 
form {display:inline;} 
.float_left {float:left;} 
.float_right {float:right;} 
div#top_nav {height:40px; background-color:#eee; padding:5px;} 
div#top_nav_container {width:980px; margin:0 auto;} 
div#top_nav_left, div#top_nav_right {} 
div#top_nav_left span, div#top_nav_right span {} 
div#top_nav_left a, div#top_nav_right a{} 
div#top_nav_left a:hover, div#top_nav_right a:hover{background-color:#fff;} 
span#top_nav_search {margin-left:15px;} 

Answer 1

vertical-align不適用於浮動元素。

您可以設置行高，雖然在this fiddle：

div#top_nav {height:40px; background-color:#eee; padding:5px; line-height: 38px} 

作爲一個方面說明：如果你正在使用的ID，選擇不要將標籤名稱添加到規則，例如：

div#top_nav {line-height: 38px} //Bad 
#top_nav {line-height: 38px} //Good 

Answer 2

使用line-height爲您的DIV的高度。在你的情況下使用line-height:40px;<a>標籤

Answer 3

可以使用Flexbox，就這樣：

div#top_nav_container { 
    width:980px; 
    margin:0 auto; 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Chrome */ 
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
    align-items: center; 
} 

jsfiddle example