How to use vertical-align on this case

Question

First see the screenshot.

As you see in the previous picture, the words that in the left is more to top, while the right words that in the right is more to bottom, and I'm tried to use vertical-align but did not work well. [jsFiddle]
What I want is, the left and right words to be vertically aligned to textbox.

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 does not work with floated elements.

You could set line-height though as in this fiddle:

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

As a side note: don't add the tag names to the rule if you're using id-selectors, e.g:

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

Answer 2

Use line-height as your div height. In your case use line-height:40px; in <a> tag

Answer 3

you can use flexbox to this:

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