如何在这种情况下使用vertical-align

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

使用line-height作为div高度。在您的情况下，请在line-height:40px;代码

中使用<a>

Answer 2

vertical-align不适用于浮动元素。

您可以像this fiddle中一样设置行高：

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

作为旁注： 如果您使用的是id-selectors，请不要将标记名称添加到规则中，例如：

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

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