css - Div 元素未在另一个 div 元素的中间对齐

Question

这是我的相关页面标记:

<div id="header">
    <div id="logo">
        <a href="/">Home</a>
    </div>
    <div id="user_box">
        test
    </div>
</div>

还有我的相关 CSS:

#header {
    width: 960px;
    height: 110px;
}

#logo {
    background: url('/assets/img/logo.png') no-repeat center;
    width: 300px;
    height: 110px;
    float: left;
}


#user_box {
    width: 300px;
    height: 60px;
    float: right;
    vertical-align: middle;
}

现在，我想将 user_box div 放置在 header div 的垂直中间。经过大量的谷歌搜索和试验，我了解到这并不容易。显然，我不能垂直对齐像 div 这样的 block 元素。所以我正在寻找一种不同的方法来做到这一点。

我看到了 hacky display: table; 方法并尝试使用它，但它没有改变任何东西。还尝试将元素更改为内联元素，如 span，但这也不起作用。出于某种可怕的原因，我什至尝试使用 margin: auto 0;，但这也根本不起作用。

所以我寻求帮助。如何在标题 div 中垂直对齐此 div？

谢谢!

Answer 1

设置user_box的行高等于header的高度

工作演示:http://jsfiddle.net/AlienWebguy/pyppD/