html - 我无法使用 CSS 将表单放在 div 中间

Question

我正在尝试将搜索表单的输入和按钮放在我的横幅中间。

但这就是我得到的:

这里是 HTML:

<div class="header-container">
    <div class="header">
        <h1 class="logo"><strong>Magento Commerce</strong><a href="" title="Magento Commerce" class="logo"><img src="" alt="Magento Commerce" /></a></h1>
        <div class="quick-access">
            <form id="search_mini_form" action="/" method="get">
                <div class="form-search">
                    <label for="search">Search:</label>
                    <input id="search" type="text" name="q" value="" class="input-text" maxlength="128" />
                    <button type="submit" title="Recherche" class="button"><span><span>Recherche</span></span></button>
                    <div id="search_autocomplete" class="search-autocomplete">
                    </div>
                    <script type="text/javascript">
                    //<![CDATA[
                        var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Search entire store here...');
                        searchForm.initAutocomplete('/', 'search_autocomplete');
                    //]]>
                    </script>
                </div>
            </form>
            <ul class="links">
                <li class="first" ><a href="" title="Mon compte" >Mon compte</a> </li>
                <li><a href="" title="My Wishlist" >My Wishlist</a></li>
                <li><a href="" title="My Cart" class="top-link-cart">My Cart</a></li>
                <li><a href="" title="Checkout" class="top-link-checkout">Checkout</a></li>
                <li><a href="" title="Blog" class="top-link-blog">Blog</a> </li>
                <li class=" last"><a href="" title="Se connecter" >Se connecter</a></li>
            </ul>
        </div>
    </div>
</div>

这是 CSS:

.header-container {
    position:fixed;
    background-color: #000;
    height:40px;
    line-height:40px;
    width:100%;
    color:#fff;
}
.header {
    text-align:right;
    height:40px;
    line-height:40px;
    z-index:10;
}
.header .quick-access {
    height: 40px;
    line-height: 40px;
}
.header .form-search {
    float:right;
    height:40px;
    width: auto;
    line-height:40px;
}
form {
    display: inline;
}

我找到了一种使用 display: table-cell; 和 vertical-align: middle; 的方法，但我不想使用这种技术，因为我希望支持旧版浏览器。

那么技术是怎么来的:

height: 40px;
line-height: 40px;

仅使用 ul 列表菜单而不使用输入和按钮？

更新

这是您可以看到问题的 jsfiddle 链接:example

Answer 1

我建议不要为此使用行高...这不是文本 block 。
相反……我会像这样使用 padding-top:

.header .form-search {
  float: right;
  height: 40px;
  padding-top: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* FF */
  width: auto;
}

更新 fiddle :http://jsfiddle.net/gmolop/fELkE/1/