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的垂直中間。 經過Google的大量嘗試和嘗試，我知道這並不容易。 顯然，我無法垂直對齊div等圖塊元素。 所以我正在尋找一種不同的方式來做到這一點。

我看到了駭人聽聞的display: table; 方法並嘗試使用它，但並沒有改變任何事情。 還嘗試將元素更改為內聯元素（如span ，但這也不起作用。 我什至嘗試使用margin: auto 0; 由於某些可怕的原因，這也根本沒有用。

所以我正在尋求幫助。 如何在標題div中垂直對齊此div？

謝謝！

Answer 1

設置user_box的行user_box於header的高度

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

Answer 2

垂直對齊方式不適用於div，它不能用於對齊表中的元素。 在您的情況下，您可以使用此

    #user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/

Answer 3

所以我稍微弄弄了您的代碼，這就是我得到的： http : //jsfiddle.net/3k8XE/

如您所見，我將表用作表頭，並對每個元素應用相同的ID，不同之處在於兩個內部div已更改為td。 由於兩個div最初設置為float：left / right，所以我添加了一個內部td來補償兩個div之間的空間。

（當然，邊框只是為了顯示此處的實際情況。）